Vue的vue-router路由导航守卫及其解析

导航守卫

一、什么叫导航？

导航就是路由正在发生变化

二、导航守卫、路由守卫、路由的钩子函数

在路由发生变化时会自动触发的一些函数

三、守卫有哪些

一、全局守卫（通过new VueRouter()生成的这个实例对象去使用） 1.全局前置守卫 beforeEach

router.beforeEach((to, from, next) => { })

2.全局后置守卫 afterEach

router.afterEach((to, from) => { //afterEach 是在导航已经完成了触发，这时有next也没用 })

3.全局解析守卫 beforeResolve （没有太大的作用）

router.beforeResolve((to, from, next) => { })

二、路由独享

1. beforeEnter（路由规则中的一个配置项） new VueRouter({ routes: [ { path: "/hello", component: hello, beforEnter: (to, from, next) => { } } ] })

三、路由组件中（在组件的配置选项中定义的，也就是与那个data、props一起的那个） 1.beforeRouteLeave 2.beforeRouteUpdate 3.beforeRouteEnter

{ data(){ return { name: "张三" } }, beforeRouteLeave(to, from, next){ }, beforeRouteUpdate(to, from, next){ }, beforeRouteEnter(to, from, next){ } }

四、to、from、next

一、to 代表着将要去的路由的信息对象 二、from 从from要去to 当前导航正要离开的路由 三、next 是一个函数，必须要调用 1.next() 进入下一个 2.next("/") next({path:’/list’}) 重定向到某个路由。

五、详细介绍

beforeEach 全局前置 afterEach 全局后置 beforeEnter 路由独享当进入这个路由的时候，这个函数会触发，触发时机在beforeEach之后，在beforeRouteEnter之前 beforeRouteEnter1.组件内配置的。触发在beforeEnter之后beforeRouteUpdate 在动态路由的时候，参数发生变化时，触发 beforeRouteLeave 当离开时第一个触发，在beforeEach之前

六、思考如下的导航，导航守卫触发的顺序

一、 /home -> /list

1. /home组件中的 beforeRouteLeave -> beforeEach 2. /list 的配置中触发 beforeEnter -> /list组件中的 beforeRouteEnter -> afterEach

二、/detail/1 -> /detail/2

1. 全局前置beforeEach 2. detail组件中的beforeRouteUpdate 3. 全局后置 afterEach

七、需求1：任何页面跳转时，发生导航时，需要在页面上出现滚动条显示

在全局前置的beforeEach中让进度条开始滚动在全局后置的afterEach中让进度条完成

八、需求2：离开个人中心页面时需要二次确认

在个人中心页面的 beforeRouteLeave 中处理即可

九、需求3：必须要有登陆状态才能进入个人中心页面，身份认证

方案一、

对个人中心页面配置路由独享守卫beforeEnter，在里面判断是否有登陆

方案二、

给需要身份认证的页面配置路由元信息(meta)，然后再全局前置守卫中，处理即可。beforeEach中处理即可。 meta 元信息是给某个路由配置一些额外的信息。

需求增加：登陆成功之后，浏览器后退不要进入登陆页面。

在登陆成功跳转的时候，不要使用push，使用replace实现就行。

需求再增加：登陆成功之后要跳转回之前想要去的页面

在身份验证不通过，打回到登陆页面时，将当前的地址携带在url地址上，通过？号传递过去登陆页面登陆成功之后，通过url地址获取到之前要去的页面地址，然后跳转即可。？推荐使用to.fullPath 而不是 to.path 好在哪里？比如我们去/my的时候，url路由携带有?号的参数。 /my?type=1&hello=2这时使用to.path 只能得到/my而使用to.fullPath 能得到完整的/my?type=1&hello=2