Vue-router的导航钩子

1.全局导航钩子

vue-router全局导航钩子： beforeEach和afterEach是vue-router实例对象的属性；
每次路由跳转，都会执行beforeEach和afterEach。
Vue2.5.0新增了beforeResolve。
共有三个参数：to：要到达的路由；from：当前路由；next；下一步要做的；
参数具体信息可打印，用法见代码。

//路由配置文件index.js
import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router);
const routes = [
    {
      path: '/',
      name: 'login',
      component: login
    },
    {
      path:'/mainsystem',
      name:'mainsystem',
      component: mainsystem,
      children:[
        {
          path:'/',
         component:map
        },
        {
          path:'/map',
          component:map，
           meta: {
            requireAuth: true // 配置此属性，进入页面前判断是否需要登陆
          },
        }
       ]
    },
     {
       path:'/updatetable',
       name:'updatetable',
       component: updatetable
     }
  ];
//创建router对路由进行管理，通过构造函数new Router()创建。
const router = new Router({
  routes
});
//注册全局钩子用来拦截导航
router.beforeEach((to, from, next) => {
  console.log('to======>>>',to);
  //判断要去的路由有没有requiresAuth,是否需要获取权限
  if(to.meta.requireAuth){
  //token存在可以进入，根据业务需求自行更改可以获得路由权限的标准
    if(localStorage.token){
      next();
    }else{
      console.log('需要重定向！');
      next({
        path: '/',
        query: { redirect: to.fullPath } // 将刚刚要去的路由path作为参数，登录成功后再跳转到该路由
      });
    }
  }else{
    //如果无需token,那么直接调用
    next();
  }
});
export default router;

2.单个路由共享钩子

单个路由钩子： beforeEnter，共三个参数，含义如之前所述。

//路由配置文件index.js
{
      path: '/',
      name: 'Login',
      component: Login,
      beforeEnter: (to, from, next) => {
     //在进入之前可以做一些事情
        next();
      }
    }

3.组件内的钩子

组件内的钩子：
beforeRouteEnter：进入组件路由前。
beforeRouteUpdate：本路由到下级路由切换触发（Vue2.2新增）
beforeRouteLeave：离开这个路由组件。

//使用位置在具体的组件内
<script>
  export default {
    name: "mainsystem",
    data(){
      return{
        user:"会飞的阿史 "
      }
    },
    created(){
     
    },
    methods:{
    
    },
    beforeRouteEnter:function(to,from,next){
      //doSomething
      next()；
    },
    beforeRouteUpdate:function(to,from,next){
    //doSomething
      next()；
    },
    beforeRouteLeave:function(to,from,next){
      //doSomething
      next()；
    }
  }
</script>

4.VueRouter官网

更多的关于vue路由的功能，动态匹配，编程式导航，路由懒加载等——>点击电梯