vue router 权限,vuerouter动态路由权限
本文主要介绍了vue3使用vue-router和路由权限拦截的方法，具有很好的参考价值。希望对大家有帮助。如有错误或不足之处，请不吝赐教。
目录
使用vue路由器和路由授权拦截vue3。用vue-router来解释。
使用vue-router及路由权限拦截
Vue3使用vue-router的方式与vue2相同，只是在初始化路由时需要定义一些功能。另外，vue-cli工具本身可以根据创建vue3项目时的提示安装配置vue-router，所以本文只针对那些忘记安装的朋友。
第一步肯定是要先安装啦：
npm安装vue-路由器@4
接下来，我们在根src中创建路由器目录并定义index.js
下面是 src/router/index.js 的代码
//1.引入这两个函数来初始化路由
从“vue-router”导入{ createRouter，createWebHashHistory }
//2.配置路线
常量路由=[
{
路径：“/info”，
名称：信息，
component:()=import( @/pages/info )，
//路由元信息，无论你想怎么定义，我一般都是用这种方法定义路由权限然后结合路由拦截，
//下面的auth:true表示需要授权登录才能进入这个页面。
元：{
auth:没错，
},
},
{
路径：“/login”，
名称：登录，
组件：()=import(@/pages/login )，
元：{
auth: false，
},
}
]
//3.创建路由实例
const router=createRouter({
History: CreateWebHashHistory()，//表示使用哈希模式，即url会有前缀#。
路线
})
//4.还可以监听路由拦截，比如权限验证。
router.beforeEach((收件人，发件人，下一个)={
//1.每个条件执行完之后，跟上next()或者使用route jump api，否则页面会保持不动。
//2.合理匹配条件语句，避免路由死循环。
const token=cookies.get(token )
if (to.meta.auth) {
如果(！令牌){
返回router.replace({
名称：“登录”
})
}
下一个()
}否则{
下一个()
}
})
导出默认路由器
接下来，将router/index.js引入项目的main.js文件。
//main.js
从“vue”导入{ createApp }
从 @/router/index . js //导入路由器
从“@/App.vue”导入应用程序
const app=createApp(App)
应用。使用(路由器)。挂载(#app)
导出默认应用程序
就是这样。
vue3使用vue-router讲解
cnpm i vue-router@next -D
创建路由器对象和路由配置——routerIndex.js
从“vue-router”导入{createRouter，createWebHashHistory，createWebHistory}
//1.定义工艺路线组件。请注意，此处必须使用文件的全名(包括文件后缀)。
从导入countIndex./pages/count/count index . vue ；
从导入狼山索引./pages/langshan/langshan index . vue ；
//2.定义路由配置
常量路由=[
{
路径：“/”，
重定向：“/countIndex”
},
{ path:“/count index”，组件：countIndex }，
{ path:“/langshan index”，组件：langshanIndex }，
];
//3.创建路由实例
const router=createRouter({
//4.使用哈希模式。
history: createWebHashHistory()，
//采用历史模式
//history: createWebHistory()，
Routes，//使用上面定义的路由配置。
});
导出默认路由器
//导出路由器
路由器被称为——main.js的插件。
从“vue”导入{ createApp }
从导入路由器索引。/router/router index //介绍路由对象实例
从导入应用程序。/App.vue
const app=createApp(App)
//使用配置的路由
app.use(routerIndex)
app . mount(# app)
以上个人经历，希望能给大家一个参考，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。