导航守卫主要用来通过跳转或取消的方式守卫导航。有多种机会植入路由导航过程中:全局的, 单个路由独享的, 或者组件级的。(记住参数或查询的改变并不会触发进入/离开的导航守卫。你可以通过观察$route
对象来应对这些变化,或使用beforeRouteUpdate
的组件内守卫。)
具体有哪些?
router.beforeEach((to, from, next) => { //全局前置守卫
router.beforeResolve((to, from, next) => { //全局解析守卫
router.afterEach((to, from) => { //全局后置钩子
beforeEnter: (to, from, next) => { //路由独享守卫,在route里定义。
beforeRouteEnter (to, from, next) { //组件内定义守卫
beforeRouteUpdate (to, from, next) { //组件内定义守卫
beforeRouteLeave (to, from, next) { //组件内定义守卫
router.onReady(callback, [errorCallback]) //在路由完成初始导航时调用,这意味着它可以解析所有的异步进入钩子和路由初始化相关联的异步组件。
注意:
1、这些守卫都是中间件模式,,,可以定义多个,按照创建顺序调用。守卫是异步解析执行,此时导航在所有守卫 resolve 完之前一直处于等待中。
2、什么时候结束? 在上述函数参数中,大部分都有一个 next() ,若最后一个 next 被调用了, 那么,则导航的状态就是confirmed(确认的)。
3、被确认后 要调用哪个? onReady() 函数。
4、beforeResolve 是在 被确认的 前一刻 调用。(区别是在导航被确认之前,同时在所有组件内守卫和异步路由组件被解析之后,解析守卫就被调用。)
5、上面 大部分守卫 都无法访问到 vm 实例的。有三个组件内的守卫,其中两个可以访问到vm实例。
6、在整个路由流程中,完成离开流程后,,,最后一步是哪个?
最后一个是组件内的 beforeRouteEnter 这个守卫,,,到这里时,组件实例还未创建,不能访问 this,此时开始组件生命周期,完了后把组件 this 传递 给 beforeRouteEnter 的next 回调。结束。
Vue2.0完整生命周期(包括路由守卫):https://www.jianshu.com/p/7ff8f31afebe
实际使用中各种问题汇总:
1、beforeEach 不响应?
new Vue({
el: '#app', 。
router,
store,
components: { App },
template: '<App/>'
})
router.beforeEach((to, from, next) => {
console.log('beforeEach 1...')
next();
});
router.beforeResolve((to, from, next) => {
console.log('beforeResolve 1...')
next();
});
router.onReady(() => {
console.log('onReady 1...')
});
router.afterEach((to, from) => {
console.log('afterEach 1...')
});
//在有路由的url:http://localhost:8080/selectgid 强刷浏览器。。。。结果:
beforeResolve 1...
afterEach 1...
onReady 1...
// 原因:在new Vue 解析执行时,router守卫beforeEach就已经过了。这时的beforeEach还没定义。
// 解决:把 beforeEach 定义 放在 new Vue() 前面即可。
beforeEach 1...
beforeResolve 1...
afterEach 1...
onReady 1...
//总结:导航守卫定义时,尽量放在前面。
2、首页强刷页面时,好几个守卫不响应?
//在首页url:http://localhost:8080/ 强刷浏览器。。。。结果:
//注意,首页 / 并没有配置任何 router
beforeEach 1...
onReady 1...
//解决: 把 首页 / 加到 router里面,配上一个component
beforeEach 1...
beforeResolve 1...
afterEach 1...
onReady 1...
//原因:beforeResolve是等组件内守卫执行后才会调用。没有组件的话,当然不会调用。
//结论: 最好给首页加一个route
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。