详解vue-router中的导航钩子

一：概念

作用：拦截导航，让他完成跳转或取消。

const router = new VueRouter({ ... });
router.beforeEach((to, from, next) => {
    // do someting
});

 

• to: 要进入的目标，路由对象
• from: 要离开的路由，路由对象
• next: 一个必须需要调用的方法，而具体的执行效果则依赖 next 方法调用的参数

 

• next()：如果一切正常，则调用这个方法进入下一个钩子，导航钩子结束。
• next(false)：取消导航（即路由不发生改变）。
• next('/login')：当前的导航被中断，然后进行一个新的导航（路径可自由指定）。
• next(error)：如果一个 Error 实例，则导航会被终止且该错误会被传递给 router.onError() 注册过的回调。

 2：常用场景

• 比如某些页面需要先验证是否登录，如果登录了就可以访问，否则跳转到登录页。

//全局路由改变前钩子

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

  //这里简单地使用localStorage来判断是否登陆

  if(window.localStorage.getItem('token')){

    next();

  }else{

    next('/login');

  }

})

3： 可替代的方法---》使用 watch 监测路由变化

<template>

  <div id="app">

      <keep-alive>

        <router-view/>

      </keep-alive>

  </div>

</template>



<script>

export default {

  name: 'App',

  watch: {

    '$route' (to, from) {

      // 对路由变化作出响应...

    }

  }

}

</script>