Vue router 路由守卫详解
更新时间：2021年12月26日 16:42:55 作者：学习中的小菜鸟.
这篇文章主要为大家介绍了Vue router 路由守卫，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助
一、全局前置beforeEach
当 Local Storage 里面存储的 name 是 zhangsan 的时候, 点击消息才显示消息内容
1. 全局前置beforeEach
给router添加一个路由守卫 beforeEach
语法 :
router.beforeEach((to, from, next)=>{})
作用 : 初始化的时候 和 在每一次路由切换之前调用beforeEach里面的函数
参数 :
1.to : 目标路由
2.from : 跳转前的路由
3.next : 放行
2. 实现
二、需求二
如果有很多个路径都需要做出判断以后才跳转, 就需要写很多判断的代码, 判断结构就会很复杂
这时需要判断的路由里面就可以放一个meta标签
meta标签提供关于HTML文档的元数据 (元数据指用来描述数据的数据)
这时就可以使用meta里面的标记字段进行判断
三、全局后置守卫 afterEach
afterEach 和 beforeEach 使用方法基本一致.
区别就是afterEach没有next这个参数
1. 修改title为自己的title
给每个路由指定自己的title名称
const router = new VueRouter({
routes: [
{
name: 'home',
path: '/home',
component: Home,
meta: {
title: "首页"
},
children: [
{
name: "xiaoxi",
path: 'message',
component: Message,
meta: {
title: "消息"
},
children: [
{
name: 'xiangqing',
path: 'detail',
component: Detail,
meta: {
isAuth: true,
title: "消息详情"
}
}
]
}
]
},
{
path: '/about',
component: About,
meta: {
title: "关于"
}
}
]
})
在 beforEach里面修改title名
router.afterEach((to, from) => {
document.title = to.meta.title || "测试"
})
四、组件内守卫
1. beforeRouteEnter
通过路由规则, 进入该组件时被调用
2. beforeRouteLeave
通过路由规则, 离开该组件时被调用
总结
本篇文章就到这里了，希望能够给你带来帮助，也希望您能够多多关注脚本之家的更多内容!
相关文章
本文主要介绍了Vue打包后页面出现空白解决办法，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-08-08
这篇文章主要介绍了在 Vue 中使用 iframe 嵌套页面,使用 iframe 技术可以实现多个页面之间的数据传递和交互，提高了网站的整体性能和用户体验，需要的朋友可以参考下2023-05-05
vue-resource 拦截器（interceptor）的使用详解
本篇文章主要介绍了vue-resource 拦截器（interceptor）的使用详解，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-07-07
本篇文章主要介绍了vue实现登陆登出的实现示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2021-09-09
这篇文章主要介绍了基于vue+echarts数据可视化大屏展示的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-12-12
这篇文章主要介绍了apache和nginx下vue页面刷新404的解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-12-12
这篇文章主要介绍了.html页面引入vue并使用公共组件方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-01-01
本文主要介绍了Element框架el-tab点击标签页时再渲染问题的解决，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2022-04-04
这篇文章主要为大家详细介绍了vue原生方法自定义右键菜单，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-04-04
这篇文章主要给大家介绍了关于Vue中$root使用方法及注意事项的相关资料,vue中$root是用来访问根组件的,文中通过代码介绍的非常详细,需要的朋友可以参考下2024-03-03
最新评论