router.beforeEach 全局守卫 路由导航的用处及部分作用

本文介绍了Vue中router.beforeEach的使用方法,包括如何通过它实现页面标题的动态变化及进行登录状态验证。

router.beforeEach就是全局守卫,也被叫路由导航
第一个重要的问题是它什么时候会执行呢?=>路由跳转就会触发
第二个重要的问题是它怎么写,有哪些参数,和注意点?=>
在路由中写上meta属性,实现左上角title的动态变化,如图
在这里插入图片描述
router.beforeEach((to, from, next) => {
// 从from跳转到to
// 实现动态切换document.title属性
document.title = to.matched[0].meta.title
next()保证往下执行 记得写写
next()
})
结果如图:
在这里插入图片描述
在这里插入图片描述
第三它还有一个重要的应用就是对登录验证的判断,判断token是否存在。如果不存在,如果没有登录,跳转至登录页面next(’/login’)

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值