Vue全家桶学习—VueRouter路由守卫

一、需求

正如其名，vue-router 提供的导航守卫主要用来通过跳转或取消的方式守卫导航。即路由改变时，需要经过"守卫"的检查，判断能不能跳转，或者应该跳转去哪儿。有多种机会植入路由导航过程中：全局的, 单个路由独享的, 或者组件级的。。最常使用的就是跳转页面前，判断用户是否登录，如果用户已经登录，则直接跳转，否则跳转到登录界面。

在跳转到购物车或者我的页面时，判断是否登录，没有登录则跳转到登录界面。

二、实现：

在路由配置中，为Me新添加一个默认子路由，即代表Me中子路由默认显示的组件为用户信息。

显然用户如果没有登录，那么就应该显示登录或者注册组件，设置路由守卫：

这里值得注意的时：这个守卫只拦截了“/me”和“/goodcar”的跳转，而"/me"的子路由“/me/login”和“/me/register”并不受影响。
将Me.vue:

<template>
  <div class="about">
    <h1>这是我的界面！</h1>
    <div id="nav" v-if="!isLogin">
      <router-link to="/me/login">登录</router-link> |
      <router-link to="/me/register">注册</router-link>
    </div>
<!--  -->
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  data (){
    return{
      isLogin: false
    }
  },
  created() {
    if(localStorage.getItem("username")){
      this.isLogin = true
    }
  }
}
</script>

即登录以后便隐藏导航超链接。

三、效果：

浏览器中没有localStrorage时，点击购物车和我的导航，直接跳转到登录：

浏览器中存在localStorage时：

跳转到个人用户资料界面，而且登录和注册导航也隐藏了。在正式的项目中，用户的登录状态也可以放在vuex中，方便在其他地方使用。

1、全局路由守卫

上面将守卫放在router的配置文件index.js文件中，那么相当于全局使用了这个路由守卫，这就是全局路由(beforeEach)，基本格式：

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

2、路由独享守卫

还有单个路由使用的守卫，也就是在定义一个路由的时候就给他配置一个守卫(beforeEnter)：

{
      path: '/me',
      component: Me,
      beforeEnter: (to, from, next) => {
        // ...
      }
    }

3、组件内路由守卫

组件内路由守卫，与全局组件作用类似，但是作用范围仅仅是在当前组件中：

export default{
	beforeRouteEnter(to,from,next){
      // 不能获取组件实例 `this`，因为当守卫执行前，组件实例还没被创建。
    },
    beforeRouteUpdate(to,from,next){
      // 在当前路由改变，但是该组件被复用时调用，通常是访问当前路由的参数改变，组件复用。
    },
    beforeRouteLeave(to,from,next){
      // 可以访问组件实例 `this`
    }
    
}