您的位置:首页 >> Vue >> 《和小米一起学Vue.js》— 导航守卫

《和小米一起学Vue.js》— 导航守卫

[ 孤狼 | 2023-01-09 11:41:33 | Vue | 1046°C | 0条评论 ]

正如其名,vue-router 提供的导航守卫主要用来通过跳转或取消的方式守卫导航。这里有很多方式植入路由导航中:全局的,单个路由独享的,或者组件级的。


全局前置守卫

你可以使用 router.beforeEach 注册一个全局前置守卫:

每个守卫方法接收三个参数:

to: Route: 即将要进入的目标 路由对象

from: Route: 当前导航正要离开的路由

next: Function: (router4.0 版本以后非必需)一定要调用该方法来 resolve 这个钩子。执行效果依赖 next 方法的调用参数。

next(): 进行管道中的下一个钩子。如果全部钩子执行完了,则导航的状态就是 confirmed (确认的)。
next(false): 中断当前的导航。如果浏览器的 URL 改变了 (可能是用户手动或者浏览器后退按钮),那么 URL 地址会重置到 from 路由对应的地址。
next('/') 或者 next({ path: '/' }): 跳转到一个不同的地址。当前的导航被中断,然后进行一个新的导航。你可以向 next 传递任意位置对象,且允许设置诸如 replace: true、name: 'home'之类的选项以及任何用在 router-link 的 to prop 或 router.push 中的选项。
next(error): (2.4.0+) 如果传入 next 的参数是一个 Error 实例,则导航会被终止且该错误会被传递给 router.onError()注册过的回调。

//index.js

//3.组装成一个路由对象
const router = new VueRouter({
routes,
mode:'history'
})

router.beforeEach((to, from, next) => {
//这里可以处理路由跳转的逻辑
//例如判断用户是否登录等等
if(to.path=="/user"){
alert("欢迎来到用户界面");
}
next() //router4.0 之后无需调用
})

上面这段代码,会自动识别要跳转的路由地址,如果要跳转的地址是 user ,则会自动弹窗提示。


全局解析守卫 

你可以用 router.beforeResolve 注册一个全局守卫。这和 router.beforeEach 类似,区别是在导航被确认之前,同时在所有组件内守卫和异步路由组件被解析之后,解析守卫才会被调用。


全局后置钩子

你也可以注册全局后置钩子,然而和守卫不同的是,这些钩子不会接受 next 函数也不会改变导航本身:

router.afterEach((to, from) => {
if(to.name=="user"){
// console.log(to);
alert(to.query.uid)
}
})

上面的代码会在路由切换之后,匹配 user 路由,并弹出 query 下的 uid 参数


路由独享的守卫

上面的都是通用的路由守卫,如果想只有一个路由起作用,可以在路由配置上直接定义 beforeEnter 守卫:

//index.js
const routes = [
{
path: '/user', //对应的网址路径
name: 'user', //对应的路由名称
component: UserView,
beforeEnter: (to, from, next) => {
//这里只处理user路由的数据,所以不需要判断是否是 user 路由
alert(to.query.uid);
next();
}
}
]


组件内的守卫

除了可以直接在路由中配置独立的守卫,也可以在组件中独立设置守卫

<template>
<div>
<h1>这里是user页面</h1>
<h2>当前的用户ID是:{{$route.query.uid}}</h2>
</div>
</template>
<script>
export default {
beforeRouteEnter(to, from, next) {
// 在渲染该组件的对应路由被 confirm 前调用
// 不!能!获取组件实例 `this`
// 因为当守卫执行前,组件实例还没被创建
alert('欢迎你UID:'+to.query.uid+' 号');
next();
},
beforeRouteUpdate(to, from, next) {
// 在当前路由改变,但是该组件被复用时调用
// 举例来说,对于一个带有动态参数的路径 /foo/:id,在 /foo/1 和 /foo/2 之间跳转的时候,
// 由于会渲染同样的 Foo 组件,因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
// 可以访问组件实例 `this`
next();
},
beforeRouteLeave(to, from, next) {
// 导航离开该组件的对应路由时调用
// 可以访问组件实例 `this`
alert("下次光临");
next();
}
}
</script>




导航解析流程

看完了各种导航守卫之后,我们还是需要来了解一下,各个导航守卫调用的先后顺序,这样方便我们来区别他们。

1.导航被触发。

2.在失活的组件里调用 beforeRouteLeave 守卫。

3.调用全局的 beforeEach 守卫。

4.在重用的组件里调用 beforeRouteUpdate 守卫 (2.2+)。

5.在路由配置里调用 beforeEnter

6.解析异步路由组件。

7.在被激活的组件里调用 beforeRouteEnter

8.调用全局的 beforeResolve 守卫 (2.5+)。

9.导航被确认。

10.调用全局的 afterEach 钩子。

11.触发 DOM 更新。

12.调用 beforeRouteEnter 守卫中传给 next 的回调函数,创建好的组件实例会作为回调函数的参数传入。



代码下载

下载地址:  密码:q87s



转载请注明出处:http://gl.paea.cn/n.php?n=204
 
如您看得高兴,欢迎随意投喂,让我们坚持创作!
赞赏一个鸡腿
还没有人留下遗迹
综合 · 搜索