导航钩子

官方文档转载自：https://router.vuejs.org/zh/guide/advanced/navigation-guards.html
vue-cli搭建的vue框架
1、全局路由钩子
main.js:

路由的钩子配置一个全局前置钩子函数
/*  // 全局导航钩子
router.beforeEach(function (to, from, next) {
  var logged_in = false;
  if (!logged_in && to.path == '/test') // to.path是点击前往的组件
    next('/one'); // 跳转的地址
  else
    next(); // 正常跳转
})
*/
new Vue({
  el: '#app',
  router,
  components: { App }, // App就是App.vue组件
  template: '' // 模版名要跟组件名一样
})

2、子路由的钩子
xxx.vue:

3、组件内钩子
index.js

export default new Router({
  routes: [ /* 进行路由配置，规定“/”引入到HelloWorld组件 */
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    },
    {
      // path: '/one/:name',
      path: '/one',
      name: 'one',
      component: one,
      beforeEnter: (to, from, next) => { // 路由内钩子用beforeEnter方法
        console.log(to)
        console.log(from)
        // next('/test');
        // next(false);
        var is_login = false;
        if (!is_login) // if (!is_login && from.path == '/')
          next(true);   //next：路由的控制参数，有如下四种调用方式：
//next()：如果一切正常，则调用这个方法进入下一个钩子。
//next(false)：取消导航（即路由不发生改变）
//next('/login')：当前的导航被中断，然后进行一个新的导航（路径可自由指定）。
//next(error)：如果一个 Error 实例，则导航会被终止且该错误会被传递给 router.onError() 注册过的回调
        else
          next();
      }
    }
  ]
})