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路由拦截的资料请关注脚本之家其它相关文章！
相关文章
这篇文章主要介绍了mpvue小程序开发之 实现一个弹幕评论功能，本文通过实例讲解的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下2019-11-11
这篇文章主要为大家介绍了使用vNode实现给列表字段打标签示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-09-09
为了提高页面展示效果，特别类似于登录界面内容比较单一的，粒子效果作为背景经常使用到，vue工程中利用vue-particles可以很简单的实现页面的粒子背景效果，本文给大家分享vue粒子动态背景效果实现代码，需要的朋友参考下吧2022-05-05
这篇文章主要介绍了Vue通过provide inject实现组件通信,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2020-09-09
这篇文章主要介绍了vue DatePicker日期选择器时差8小时问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-05-05
这篇文章主要介绍了Vue中的Strorage本地化存储详解，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
这篇文章主要给大家介绍了关于对vue生命周期的深入理解，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-12-12
这篇文章主要介绍了Vue-cli配置打包文件本地使用的教程图解,非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下2018-08-08
这篇文章主要为大家介绍了Vue自定义指令v-focus实例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-09-09
这篇文章主要介绍了vue3+ts实现一个表单组件的详细代码,确保通过axios调用后端接口来获取省市区和街道数据,并在选择省市区时加载相应的街道数据,需要的朋友可以参考下2024-07-07
最新评论