vue路由拦截的三种方法小结
更新时间：2024年02月01日 10:00:22 作者：qq_32956731
本文给大家介绍了vue路由拦截的三种方法,全局前置守卫,路由独享守卫和全局后置钩子这三种方法,并通过代码示例给大家介绍的非常详细,对大家的学习或工作有一定的帮助,需要的朋友可以参考下
1.全局前置守卫
Vue Router 提供了全局前置守卫，它可以在路由切换之前对请求进行拦截。全局前置守卫可以用来检查用户是否已经登录，或者检查用户是否具有访问该页面的权限。在router/index.js 中添加以下代码
export function createRouterGuards(){
try{
router.beforeEach((to,from,next)=>{
if(to.meta.noLogin){
next()
}else{
if(getSessionStorage('token')){
if(getSessionStorage('menuCodeList').includes(to.meta.menuCode)){
next()
}
}
}
})
}
}2.路由独享守卫
在Vue Router 中，可以为每个路由单独设置守卫，这种守卫成为路由独享的守卫。路由独享的守卫可以用来检查路由参数、调用异步接口、处理数据等。在router/index.js 中添加以下代码
const router = new VueRouter({
routes:[{
path:'/example/:id',
component:Example,
beforeEnter:(to,from,next)=>{
const id = to.params.id
if(id > 0 && id < 100){
next()
}else{
next('/error')
}
}
}]
})这个代码片段会在路由 /example/:id 的切换之前执行，检查传入的参数 id 是否满足条件，如果不满足则跳转到 /error 页面，否则就继续进行路由切换。路由独享的守卫是一种非常灵活的路由拦截方式，可以让我们更灵活地控制路由的切换
3.全局后置钩子
与全局前置守卫类似，Vue Router 还提供了全局后置钩子，它可以在路由切换之后对响应进行拦截。全局后置钩子可以用来处理路由切换之后的一些逻辑问题，如页面统计、错误处理等。在router/index.js 中添加以下代码
router.afterEach((to,from)=>{
const currentPath = to.path;
const params = to.params;
console.log(`切换到${currentPath}页面，路由参数为${JSON.stringify(params)}`)
})这个代码片段会在每次路由切换之后执行，输出当前路由页面的路径和参数。通过全局后置钩子，我们可以更好地了解路由状态和相应的结果，以便对项目进行下一步的开发和测试。
以上就是vue路由拦截的三种方法小结的详细内容，更多关于vue路由拦截的资料请关注脚本之家其它相关文章！
相关文章
这篇文章主要介绍了Vue3子组件向父组件传递消息,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2023-07-07
这篇文章主要介绍了vue项目中axios的封装请求，axios 是一个轻量的HTTP客户端，它基于 XMLHttpRequest 服务来执行 HTTP 请求，支持丰富的配置，下文更多详细资料,需要的朋友可以参考一下2022-03-03
这篇文章主要介绍了Vue3.0 响应式系统源码逐行分析讲解，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-10-10
这篇文章主要介绍了前端Vue自定义地址展示地址选择地址管理组件的示例详解,本文通过示例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2023-06-06
这篇文章主要介绍了vue项目实现github在线预览功能，本文通过提问两个问题带领大家一起学习整个过程,需要的朋友可以参考下2018-06-06
本文主要介绍了Vue+UpLoad实现上传预览和删除图片的实践，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-02-02
这篇文章主要介绍了vue构建动态表单的方法示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-09-09
这篇文章主要介绍了关于Element-UI中slot的用法及说明,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-10-10
vue3 setup语法糖各种语法新特性的使用方法(vue3+vite+pinia)
这篇文章主要介绍了vue3 setup语法糖各种语法新特性的使用(vue3+vite+pinia),本文主要是记录vue3的setup语法糖的各种新语法的使用方法,需要的朋友可以参考下2022-09-09
在实际的项目开发中,使用svg图标占用内存比图片更小,映入图片内存比较大,同时也适用于不同屏幕的尺寸,下面这篇文章主要给大家介绍了关于vue项目引入svg图标的完整步骤,需要的朋友可以参考下2022-10-10
最新评论