1. uni-simple-router官网文档：快速上手 | uni-simple-router
2. 插件平台兼容性：路由、拦截、最优雅解决方案 uni-simple-router - DCloud 插件市场
3. App.vue是uni-app的主组件，所有页面都是在App.vue下进行切换的，是页面入口文件。但App.vue本身不是页面，这里不能编写视图元素，也就是没有<template>。具体参考：uni-app官网

一、安装npm库

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

二、配置vue.config.js

//vue.config.js
const TransformPages = require('uni-read-pages')
const {webpack} = new TransformPages()
module.exports = {
	configureWebpack: {
		plugins: [
			new webpack.DefinePlugin({
				ROUTES: webpack.DefinePlugin.runtimeValue(() => {
					const tfPages = new TransformPages({
						includes: ['path', 'name', 'aliasPath']
					});
					return JSON.stringify(tfPages.routes)
				}, true )
			})
		]
	}
}

三、新建router.js

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

const router = createRouter({
	platform: process.env.VUE_APP_PLATFORM,  
	routes: [...ROUTES]
});
//全局路由前置守卫
router.beforeEach((to, from, next) => {
	next();
});
// 全局路由后置守卫
router.afterEach((to, from) => {
    console.log('跳转结束')
})

export {
	router,
	RouterMount
}

四、在main.js中引入router.js

// main.js

import Vue from 'vue'
import App from './App'
import {router,RouterMount} from './router.js'  //路径换成自己的
Vue.use(router)

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

---

之前旧的实现（不推荐）：

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

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

第2步：在vue.config.js文件中配置如下代码：

// vue.config.js
const TransformPages = require('uni-read-pages')
const {webpack} = new TransformPages()
module.exports = {
	configureWebpack: {
		plugins: [
			new webpack.DefinePlugin({
				ROUTES: webpack.DefinePlugin.runtimeValue(() => {
					const tfPages = new TransformPages({
						includes: ['path', 'name', 'aliasPath']
					});
					return JSON.stringify(tfPages.routes)
				}, true )
			})
		]
	}
}

第3步：在src-》router目录下新建index.js

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

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

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

// 全局路由：前置守卫
router.beforeEach((to, from, next) => {
    const hasToken = getStorage("token")
	if(hasToken){
        ...
    } else {
        if(whiteList.includes(to.path)){
			next()
	    } else {
            ....
        }
    }
});

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

export {
	router,
	RouterMount
}

 第4步：修改main.js文件即可。（ 修改步骤：import引入路由->use安装路由->执行RouterMount()函数）（Tip:如果使用onLoad的取上页面传参options，会有2种表现，参数为1个，直接使用即可，参数多个，options多了query字段，原因暂不清楚。）

        注：不需要修改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>

参考：

1. uni-simple-router官网介绍：路由懒加载 | uni-simple-router 
2. 查看该插件平台兼容性：路由、拦截、最优雅解决方案 uni-simple-router - DCloud 插件市场