vue 路由钩子们

我会带着你远行 2022-05-10 15:54 158阅读 0赞

vue里路由钩子分为三种：

**1.全局路由钩子；**

**2.单个路由钩子；**

**3.组件内路由钩子；**

下面总结一下使用方法：

1》全局路由钩子是在初始化VueRouter以后，直接使用router实例进行注册；包括两个钩子： beforeEach 和 afterEach，即每个路由切换前和切换后调用。

--------------------

注： 路由对象时在使用vue-router启动应用时，每个匹配的组件实例都会被注入router的对象，称之为路由对象，在组件内部可以通过this.$route 的方式调用。

路由对象包括 $route.path , $route.params, $route.query, $route.router, $route.matched等属性

--------------------

router.beforeEach( (to, from, next ) => {
    
      /** to： 即将要进入的路由对象
    
        * from：当前正要离开的路由对象
    
        * next：进行下一个状态，注意，一定要调用next（）方法，否则路由钩子不会被resolved
    
        */
    
    } )
    
    router.afterEach( route => {
    
        // route ： 进入的路由对象
    
    } )

2》单个路由钩子，需要在路由配置的时候直接定义。

const router = new VueRouter ({
        routes: [
            {
                path: '/index',
                component: Index,
                beforeEnter: (to, from, next) => {
                
                }
            }
        ]
    })

3》组件内钩子，这个钩子要在组件内定义。

主要有三个钩子（2.2及以下版本）：

const Index = {
        template: `...`,
        beforeRouteEnter (to, from, next) => {
            //参数的含义与全局钩子一样
            //注意，此时实例还没有创建，所以不能调用组件实例this；
            //可以通过给next指定一个回调的方式，来访问实例
            /** next(
            *    vm => {} 通过参数vm来访问组件实例
            *    )
            *
            */ 
            //再次注意，只有这个钩子可以通过指定回调，其他的钩子都不能
        },
        beforeRouteUpdate(to, from, next) => {
            //当前路由变化，且组件被复用时候调用    （2.2+） 如/foo/1 和 /foo/2之间切换时
            //此时可以访问this
        },
        beforeRouteLeave(to, from, next) => {
            //路由切换出该组件时调用，此时可以访问this
            //可以用来禁止用户页面修改未保存时突然离开，通过next(false)来中断导航。
        }
    }

--------------------

在路由切换的过程中，可以通过watch动态路由的变化来获取数据。

watch:{
        '$route' (to, from) {
            //尽情获取数据吧
        }
    }

--------------------

### 路由导航顺序总结： ###

![70][]

[70]: /images/20220505/008e6b0c694b4ffbba2754c926736d2c.png