uniapp路由管理器(uniapp路由拦截)
小编在这里给大家介绍的是uni-simple-router，如果之前有用过vue的朋友，会觉得，用的上手很快，uni-simple-router是一个专门为uniapp打造的路由管理器，和vue-router很相似。
1.打开终端输入npm命令下载
npm install uni-simple-router复制代码
2.初始化安装
npm install uni-read-pages复制代码
3.在项目的根目录创建一个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 )
})
]
}
}复制代码4.再次在根目录下创建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) => {
console.log(to,form,next)
});
// 全局路由后置守卫
router.afterEach((to, from) => {
})
export {
router,
RouterMount
}复制代码5.在main.js里面引入router.js
import {router,RouterMount} from './router.js' //路径换成自己的
Vue.use(router)复制代码6.可能会遇到的问题
1.就是你在路由守卫判断的时候需要给一个 return，不然可能会导致栈溢出。
if(判断条件) return next()复制代码
2.如果你在router.js里面引入了createRouter，RouterMount，但是还是报错说没引入，那这可能是你下载的版本号有问题
这是小编引入的版本你可以参考一下，感谢大家对小编的支持。
作者：是一个秃头
链接：https://juejin.cn/post/7038787213982695461