关于vue.js:vuerouter的导航钩子导航守卫

2次阅读

共计 3405 个字符，预计需要花费 9 分钟才能阅读完成。

在做 vue 我的项目的时候，要求用户在页面拜访前先登录，或在来到页背后收回揭示。vue 官网提供的路由管理器 vue-router 提供的导航钩子，通过跳转或勾销的形式守卫导航。以下总结了路由钩子函数的应用办法和一些应用场景。

router.beforeEach 路由扭转前的钩子

const router = new VueRouter({...})

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

其中：

to：将要拜访的门路
from：代表从哪个门路跳转来的
next：是一个函数，示意放行。有如下几种调用形式
- next()：如果一起失常，则调用该办法进入下一个钩子；
- next(false)：中断以后导航，即路由地址不发生变化；
- next(‘/xxx’) 或 next({path: ‘/xxx’})：强制跳转到指定门路；
- next(error)：如果传入的是一个 Error 实例，则导航会被中断且该谬误会被传递给 router.onError() 注册过的回调。

应用：

应用该函数，肯定要调用 next()，否则钩子函数不能 resolve；
该办法比拟罕用于：验证用户拜访权限。
比方：一个零碎须要先验证用户是否登录，如果登录了就能够拜访，否则间接跳转到登录页面。具体实现如下：

import Vue from 'vue'
import VueRouter from 'vue-router'
import {getToken} from '@Utils/session.utils' // 登录用户的 token
import Login from '../pages/Login.vue' // 引入登录页
const Home = () => import('../pages/Home.vue')  // 引入首页

Vue.use(VueRouter) // 全局注入 router

// 配置路由参数
const routes = [{ path: '/login', name: 'login', component: Login},
  {path: '/home', name: 'home', component: Home}
]

const router = new VueRouter({routes})

// 全局挂载路由导航守卫：验证用户是否登录
router.beforeEach((to, from, next) => {if (to.name !== 'login' && !getToken()) next('/login') // 如果用户不是拜访登录页且没有登录，则强制跳转到登录页
  else next()})

export default router

router.beforeResolve 在导航被确认之前，同时在所有组件内守卫和异步路由组件被解析之后，该钩子函数就被调用。
该办法我在我的项目中临时还未应用到，具体应用场景欢送大家补充 :)

router.afterEach 路由扭转后的钩子
```
router.afterEach((to, from) => {... ...})
```
该办法同全局前置守卫 router.beforeEach 不同的是少了 next() 函数，也不会扭转导航自身。

应用场景：
- 路由切换，将页面的滚动地位返回到顶部。
  
  例如：一个页面比拟长，当滚动到某个地位后切换路由，这时跳转的页面滚动条地位默认是前一个页面来到时停留的地位，能够通过该钩子函数将滚动条地位重置。
```
// 切换路由，页面返回到顶部
router.afterEach((to, from) => {window.scrollTo(0, 0)
})
```

beforeEnter 对某个路由的独自守卫，在路由配置上间接定义

const routes = [{ path: '/login', name: 'login', component: Login},
    { 
        path: '/home', 
        name: 'home', 
        component: Home,
        beforeEnter: (to, from, next) => {... ...}
    }
]

const router = new VueRouter({routes})

应用：

该办法的参数应用同全局前置守卫 router.beforeEach 是一样的；
例如：依据登录用户的不同角色，展现不同的模块；或者给指定路由组件独自增加动画。

import Vue from 'vue'
import VueRouter from 'vue-router'
import {getUserRole} from '@Utils/session.utils' // 登录用户的角色

const UserCenter = () => import('../pages/UserCenter.vue')

const routes = [
    ... ...
    { 
        path: '/usercenter', 
        name: 'usercenter', 
        component: UserCenter,
        beforeEnter: (to, from, next) => {if(getUserRole() === 'admin') next('/admincenter')
            else next()}
    }
]

beforeRouteEnter(to, from, next) 在进入以后组件对应的路由前调用
```
export default {data() {...},
    beforeRouteEnter(to, from, next) {... ...}
}
```
留神：
- 该函数内不能拜访以后组件实例 this，因为函数在对应路由被 comfirm 前调用，此时将要渲染的组件实例还没被创立；
- 能够通过给 next 传递一个回调来拜访组件实例，即把组件实例 vm 作为回调办法的参数；该回调的执行在 mounted 前面；
```
beforeRouteEnter (to, from, next) {
    next(vm => {// 通过 vm 来拜访组件实例})
}
```
- beforeRouteEnter 是反对给 next 传递回调的惟一守卫。
- 应用场景：
  例如：从一个列表页进入到详情页，而后再返回到列表页，要求保留来到列表页之前拜访的数据及滚动地位，从其余页面从新进入列表页，获取最新的数据。具体实现请点这里

beforeRouteUpdate(to, from, next) 在以后路由扭转，然而该组件被复用时调用
```
beforeRouteUpdate (to, from, next) {... ...}
```
注：
- 该函数内能够拜访以后组件实例 this
- 例如：在一个带有动静参数的门路 /detail/:id，在 /detail/aaa 和 /detail/bbb 之间跳转的时候，因为两个路由渲染的是同个 Detail 组件，因而原来的组件实例会被复用（比起销毁再创立，复用则会更加高效），在这种状况下这个钩子会被调用，而组件的生命周期钩子不会再被调用。

beforeRouteLeave(to, from, next) 在来到以后组件对应的路由前调用
```
beforeRouteLeave (to, from, next) {... ...}
```
注：
- 该函数内能够拜访以后组件实例 this;
- 比方：用户在以后页面有还未保留的内容时忽然来到，阻止页面跳转并给出提醒，或者在用户来到时革除或存储一些信息等。

导航被触发；
在失活的组件里调用 beforeRouteLeave 守卫；
调用全局的 beforeEach 守卫；
在重用的组件里调用 beforeRouteUpdate 守卫 (2.2+)；
在路由配置里调用 beforeEnter；
解析异步路由组件；
在被激活的组件里调用 beforeRouteEnter；
调用全局的 beforeResolve 守卫 (2.5+)；
导航被确认；
调用全局的 afterEach 钩子；
触发 DOM 更新；
调用 beforeRouteEnter 守卫中传给 next 的回调函数，创立好的组件实例会作为回调函数的参数传入。

其实罕用的也就那么几个，了解了其用法，路由导航的解析流程也就明了了。

除了应用钩子函数外，咱们也能够应用 watch 来监听 $route 对象，而后依据路由参数的变动来进行响应。

<template>
    <div id=``"app"``>
        <keep-alive>
            <router-view/>
        </keep-alive>
    </div>
</template>

<script>
    export default {
        name: 'App',
        watch: {'$route' (to, from) {// 对路由变动作出响应...}
        }
    }
</script>

正文完