uni-app集成uni-simple-router、uni-read-pages插件自动读取page.json文件实现路由管理（无需手动配置路由表）

uni-simple-router

插件地址：uni-simple-router
（uni-read-pages在uni-simple-router文档中有提及）

此次版本为uni-simple-router@1.5.5，2.0暂不支持这种写法

可拦截到所有uni-app支持的页面跳转

安装插件

npm install uni-read-pages

npm install uni-simple-router@1.5.5

1. 配置vue.config.js

在项目根目录下创建vue.config.js

const TransformPages = require('uni-read-pages')  

const tfPages = new TransformPages()  
module.exports = {  
    configureWebpack: {  
        plugins: [  
            new tfPages.webpack.DefinePlugin({  
                ROUTES: JSON.stringify(tfPages.routes)  
            })  
        ]  
    }  
}

2. 新建router.js

在common目录下新建router.js

import Vue from 'vue'  
import Router from '@/components/uni-simple-router'  

Vue.use(Router)  
//初始化  
const router = new Router({  
    APP: {  
        animation: {  
            animationType: 'pop-in',  
            animationDuration: 300  
        }  
    },  
    encodeURI: false,  
    routes: ROUTES //路由表  
});  

//全局路由前置守卫  
router.beforeEach((to, from, next) => {next();})  
// 全局路由后置守卫  
router.afterEach((to, from) => {})  
export default router;

3. 在 main.js 引入 router.js

import router from '@/common/router'  
import {  
    RouterMount  
} from '@/components/uni-simple-router'  

//放在最后  
//v1.3.5起 H5端 你应该去除原有的app.$mount();使用路由自带的渲染方式  
// #ifdef H5  
RouterMount(app, '#app');  
// #endif  
// #ifndef H5  
app.$mount(); //为了兼容小程序及app端必须这样写才有效果  
// #endif