路由守衛，當目標路由設定了路由守衛，如果沒有做相應的驗證（如登陸），無法跳轉到目標路由

在路由配置中新增meta屬性，屬性為自定義，用於守衛判斷，

注意：父路由設定了路由守衛，子路由也應該設定路由守衛，不然路由守衛會失敗

import Vue from 'vue'
import Router from 'vue-router'
import home from '@/views/home.vue'
import login from '@/views/login.vue'
import Register from '@/views/register.vue'

Vue.use(Router)
export default new Router({
  mode:'history',
  routes: [
    {
      path: '/',
      name: 'home',
      component: home,
      //當前路由的元資料，自定義
      meta:{
        requireAuth:true
      }
    },
    {
      path:'/login',
      name:'login',
      component:login,
      meta:{
        cheakIsLogin:true
      }
    },
    {
      path:'/register',
      name:'Register',
      component:Register,
      meta:{
        cheakIsLogin:true
      }
    }
  ]
})
 

在main.js入口檔案中，新增守衛判斷

//前置路由守衛
router.beforeEach((to,from,next)=>{
  //to 目標路由
  //from 來源
  //next 放行

  //如果需要驗證，首頁守衛
  if(to.meta.requireAuth){
    //vuex倉庫中的資訊是否存在
    if(store.getters.user.userName){
      next()
    }else{
      //攔截路由
      next('./login')
    }
  }else{//不需要驗證，直接放行
    next()
  }
  //登陸、註冊守衛
  if(to.meta.cheakIsLogin){
    if(store.getters.user.userName){
      // next('/')
      //路由讓其返回至原來的地址
      router.back()
    }else{
      next()
    }
  }else{
    next()
  }
})