vue-router方法的记录

记录一下vue-router中的路由钩子函数的基本用法

路由钩子函数分为三种类型如下：

　　第一种：全局钩子函数。

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

            console.log(to,from)

　　　　//next(false) //取消了导航

　　　　next() //正常跳转，不写的话，不会跳转

　　})

            一般来说router.beforeEach钩子函数是写在main.js中的,判断用户是否登录并且token是否有效

            router.afterEach((to, from) => { 

            //这个是beforEach之后要干的事情都写在这里面

　　　　if( to.meta.title ){

　　　　　　window.document.title = to.meta.title //修改标题

　　　　}else{

　　　　　　window.document.title = '默认的title'

　　　　}

　　})

        第二种：针对单个路由钩子函数

　　beforeEnter(to, from, next){

　　　　console.log('beforeEnter')

　　　　next() //必须写这个条件才可以正常跳转

　　}

        　第三种：组件级钩子函数

　　beforeRouteEnter(to, from, next){

         // 这个路由钩子函数比生命周期beforeCreate函数先执行，所以this实例还没有创建出来

            //这一点非常重要,容易获取不到实例对象

　　　　console.log("beforeRouteEnter")

　　　　console.log(this) //这时this还是undefinde，因为这个时候this实例还没有创建出来 

                //在单个的vue页面的时候,如果需要离开或者进入某个vue页面的时候可以使用这个钩子函数

　　　　next((vm) => { 

                //vm,可以这个vm这个参数来获取this实例,接着就可以做修改了

　　　　　　vm.name = "修改了name"

　　　　})

　　},

        beforeRouteUpdate(to, from, next){

                //可以解决二级导航时，页面只渲染一次的问题，也就是导航是否更新了，是否需要更新

　　　　console.log('beforeRouteUpdate')

　　　　next();

　　},

　　beforeRouteLeave(to, from, next){

        // 当离开组件时，是否允许离开

　　　　next()

　　}