导航守卫就是通過跳转或者取消的方式守卫导航
}):跳转到一个不同的地址。当前的导航被中断然后进行一個新的导航。你可以向next()传递任意位置对象且允许设置诸如replace:true
、name:'home'
之类的对象。以及任何在vue routerr-link
中的to属性
vue routerr.push()
之中的选项。
后置钩子和前置钩子有点类似和守卫不同的是不会接受next函数,也不会改变导航本身
可以在路由上直接定义beforeEnter
守卫,这些参数跟全局前置守卫的是一样的
可以在组件内定义路由导航守卫。
//通过vm访问组件实例
beforevue routerLeave
守卫通常用来禁止用户在还没有保存修改前离开该导航可以通过next(false)来取消。
6.完整的导航解析流程
// 你在此处打印data中的数据会无情反你错误。
// 官网解释:(beforevue routerEnter 守卫不能访问this因为守卫在导航确认前被调用,因此即将登场的新组件还没被创建。)
next(): 进行管噵中的下一个钩子如果全部钩子执行完了,则导航的状态就是
confirmed (确认的) next(false): 中断当前的导航。如果浏览器的
URL 改变了
(可能是用户手动或者浏览器后退按钮)那么
URL 地址会重置到
from 路由对应的地址。
//导航被确认之前同时在所有组件内守卫和异步路由组件被解析之后,被调用 不会接受
next函数来改变导航
路由独享的守卫:在配置路由时使用
beforeEnter: 接收的三个参数和全局接收的一样
// 在渲染该组件的对应路由被 confirm 前调用
// 因为当守卫执行前组件实例还没被创建
// 在当前路由改变,但是该组件被复用时调用
// 由于会渲染同样的 Foo 组件因此组件实例会被复用。而这个钩子就会在这个情况下被调用
// 导航离开该组件的对应路由时调用 2.
beforevue routerUpdate可以用于子路有发生变化时,数据请求比如:工程
id发生变化了。 3.
beforevue routerLeave其中的一个用法是当用户填写表单没有保存数据点击离开时可以询问用户是否要离开
- 在失活的组件里调用离开守卫。