路由钩子，即导航钩子，其实就是路由拦截器，vue-router一共有三类：

  1. 全局钩子：最常用

  2. 路由单独钩子

  3. 组件内钩子

1、全局钩子

在src/router/index.js中使用，代码如下：

// 定义路由配置const router = new VueRouter({ ... })// 全局路由拦截-进入页面前执行router.beforeEach((to, from, next) => {
    // 这里可以加入全局登陆判断
    // 继续执行
    next();});// 全局后置钩子-常用于结束动画等router.afterEach(() => {
    //不接受next});export default router;

每个钩子方法接收三个参数：
to: Route : 即将要进入的目标 [路由对象]
from: Route : 当前导航正要离开的路由
next: Function : 继续执行函数

  • next()：继续执行

  • next(false)：中断当前的导航。

  • next(‘/‘) 或 next({ path: ‘/‘ })：跳转新页面，常用于登陆失效跳转登陆

2、路由单独钩子

使用：在路由配置中单独加入钩子，在src/router/index.js中使用，代码如下：

{
    path:'/home/one', // 子页面1
        component: One,
        // 路由内钩子
        beforeEnter: (to, from, next) => {
        console.log('进入前执行');
            next();
        }}
3、组件内钩子

使用：在路由组件内定义钩子函数：

  • beforeRouteEnter：进入页面前调用

  • beforeRouteUpdate (2.2 新增)：页面路由改变时调用，一般需要带参数

  • beforeRouteLeave：离开页面调用

任意找一页面，编写如下代码：

<script>export default {
    name: 'Two',
    data () {
        return {
            msg: 'Hi, I am Two Page!'
        }
    },
    // 进入页面前调用
    beforeRouteEnter(to, from, next) {
        console.log('进入enter路由钩子')
        next()
    },
    // 离开页面调用
    beforeRouteLeave(to,from, next){
        console.log('进入leave路由钩子')
        next()
    },
    // 页面路由改变时调用
    beforeRouteUpdate(to, from, next) {
        console.log('进入update路由钩子')
        console.log(to.params.id)
        next()
    }}</script>