vue 路由钩子们

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) {
        //尽情获取数据吧
    }
}

---

 

路由导航顺序总结：