uni-simple-router：使用vue-router管理uniapp路由

uniapp用到了vue的很多api，但在路由管理的功能上相较于vue-router还是比较欠缺的，比如全局导航守卫。

我们可以通uniapp的插件uni-simple-router来实现类似于vue-router的功能，但多端兼容时，一些用法还需要注意，我们会讲到。

一、安装

如果你的项目没有使用package，请先初始化：

$ npm init -y

安装依赖：

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

uni-read-pages的作用是：读取uniapp的pages.json，作为router的配置，把pages.json中的路由配置转换成vue-router配置的形式。

二、配置与初始化

1、根目录新建 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 )
			})
		]
	}
}

⚠️ 其中要重点关注第 10 行：

// ...
    includes: ['path', 'name', 'aliasPath']
// ...

includes 中包含的是router会读取pages路由中的字段名，后续如果有用到meta等路由信息，可以在 includes 里增加 ‘meta’，在pages路由中写对应的数据，router中就可以获取得到（后面再补充案例）

2、根目录新建并写入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
}

3、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

！！注意app的挂载方式，必须按照这里的写法实现！

4、重新编译运行