[JavaScript知识库]添加：Uniapp的H5项目（vue-cli创建）的全局路由拦截器uni-simple-router（共3步）。

第1步：下载路由拦截器插件uni-simple-router和自动构建路由表插件uni-read-pages。

npm install uni-simple-router@2.0.6
npm install uni-read-pages

第2步：在src->router目录下新建index.js

// router/index.js
import { RouterMount,createRouter } from 'uni-simple-router';
import store from "@/store/index.js" 

const whiteList = ['/pages/index/index', '/pages/404/404']

const getUserInfo = () => {
	store.dispatch('getUserInfoDataFromApp') // 因是H5嵌入APP的项目，需从APP获取用户信息。
}

const router = createRouter({
	platform: process.env.VUE_APP_PLATFORM, // vue-cli创建项目的相关环境变量文件里面的变量，可能是区分平台使用，不是太重要。
	routes: [...ROUTES] // 安装uni-read-pages插件后，系统读取pages.json文件后，会自动生成ROUTES数组变量
});

// 全局路由：前置守卫
router.beforeEach((to, from, next) => {
	if (store.state.userInfo.token) {
		next()
	} else {
		if (whiteList.includes(to.path)) {
			next()
		} else {
			getUserInfo()
			store.state.userInfo.token ? next() : next({path: '/pages/404/404', NAVTYPE: 'replaceAll'})
		}
	}
});

// 全局路由：后置守卫
router.afterEach((to, from) => {
	console.log('全局路由后置守卫')
})

export {
	router,
	RouterMount
}

?第3步：修改main.js文件即可。（ 修改步骤：import引入路由->use安装路由->执行RouterMount()函数）

????????注：不需要修改APP.vue文件。（尤其是不能往App.vue中添加template元素，会导致其他问题，暂不清楚导致原因&解决）

// main.js
import Vue from 'vue'
import App from './App'

import {router,RouterMount} from './router'
Vue.use(router)

import uView from "uview-ui";
import constVariable from '@/utils/const'
import store from './store'

Vue.prototype.$c = constVariable
Vue.prototype.$store = store
Vue.prototype.$toast = (title) => 
{  
	uni.showToast({
		title,
		icon: "none",
		duration: 2000 
	});
}
Vue.use(uView);

Vue.config.productionTip = false

App.mpType = 'app'
const app = new Vue({
    ...App
})

// v1.3.5起 H5端 你应该去除原有的app.$mount(); 使用路由自带的渲染方式
// #ifdef H5
	RouterMount(app,router,'#app')
// #endif

// #ifndef H5
	app.$mount(); //为了兼容小程序及app端必须这样写才有效果
// #endif

<!-- App.vue -->
<!-- [重BUG]: 引入template后，出现uni.showToast和uni.showLoading不能使用，控制台报错$vm of undefined问题。 -->
<!-- <template>
	<div id="app">
		<u-no-network></u-no-network>
		<router-view />
	</div>
</template> -->
<script>
	export default {
		onLaunch: function() {
			console.log('App onLaunch')
		},
		onShow: function() {
			console.log('App Show')
		},
		onHide: function() {
			console.log('App onHide')
		},
		globalData: {
			
		},
		methods: {
			commonSetTimeOut(callback){
				this.timer = setTimeout(() => {
					callback && callback()
				}, 300)
			}
		}
	}
</script>

<style lang="scss">
	/* 每个页面公共css */
	/* 注意要写在第一行，同时给style标签加入lang="scss"属性 */
	@import "uview-ui/index.scss";
	@import "./styles/common.scss";
	@import "./static/font/iconfont.css";
	/* 页面主窗口背景颜色: 类似body元素 */
	page{
		background-color: #F5F5F5;
		color: $uni-text-color;
		position: relative;
		font-family: PingFangSC-Regular, PingFang SC;
	}
	// 订单的搜索筛选项
	.u-dropdown__menu__item /deep/ .u-flex {
		border: 1rpx solid #CCC;
		padding: 8rpx 24rpx;
		font-weight: bold;
	}
	.empty-wrap {
		padding-top: 50% !important;
	}
	.flex {
		display: flex;
		justify-content: flex-start;
	}
</style>