uni-simple-router使用自动构建路由表

第一步下载相关插件

npm install uni-simple-router@1.5.5 //注：这里只能使用1.X版 2.0版本会有问题                                    
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', 'meta']//这里根据项目需求添加
					});
					return JSON.stringify(tfPages.routes)
				}, true )
			})
		]
	}
}

第三步：pages.json 中配置 routes

//pages.json
{
    "pages": [
        {
            "path": "pages/index/index",
            "name":"index",
            "meta":{
                "title": "首页"
            },
            "style": {
                "navigationBarTitleText": "uni-app"
            }
        }
    ],
    "globalStyle": {
        "navigationBarTextStyle": "black",
        "navigationBarTitleText": "uni-app",
        "navigationBarBackgroundColor": "#F8F8F8",
        "backgroundColor": "#F8F8F8"
    }
}

第五步：配置路由表

// router.js

import Vue from 'vue'
//这里仅示范npm安装方式的引入，其它方式引入请看最上面【安装】部分
import Router from 'uni-simple-router'

Vue.use(Router)
//初始化
const router = new Router({
    routes:ROUTES //路由表
});

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

第六步：配置main.js文件

// main.js
import Vue from 'vue'
import App from './App'
import router from './router'//这里换成对应文件路径
import { RouterMount } from 'uni-simple-router'

App.mpType = 'app'

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

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