提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  其他

当前栏目

uniapp路由管理器

代码
2023-04-18 12:50:29 时间

小编在这里给大家介绍的是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，但是还是报错说没引入，那这可能是你下载的版本号有问题

这是小编引入的版本你可以参考一下，感谢大家对小编的支持。

相关文章