vue 完善路由权限

本文介绍了Vue Router中的钩子函数,用于在路由变化时进行权限判断和其他操作。通过`to`、`from`和`next`参数,实现路由跳转时的权限控制。在开发实例中,展示了如何拦截未登录用户访问特定页面并引导其登录,登录成功后跳转至原目标页面。
摘要由CSDN通过智能技术生成

什么是钩子函数?

主要是给使用者在路由发生变化时进行一些特殊的处理而定义的函数。

为什么要使用路由的钩子函数?

在路由跳转时,需要一些权限判断或者其他操作。

Vue.beforeEach(function(to, from, next) {
	// 在跳转之前执行
})
Vue.afterEach(function(to, from) {
	// 在跳转之后执行
}) 
  1. to: 即将要进入的目标 路由对象。
  2. from: 当前导航正要离开的路由。
  3. next: 调用该方法 resolve 钩子函数(必须调用,否则钩子不会被 resolve),执行结果依赖 next 方法调用参数。
  • next() 进行管道中的下一个钩子。若全部钩子执行完,则导航状态为 confirmed (确认);

  • next(false) 中断当前导航。浏览器 url 改变 (可能是用户手动或浏览器后退按钮),此时 url 会重置到 from 路由对应的地址;

  • next('/')
    next({ path: '/' }) 跳转到一个不同地址。中断当前导航,进行一个新的导航;

  • next(error) 传入next 参数是一个 error 实例,导航会被终止,该错误会被传递给 router.onError() 注册过的回调。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值