vue——前置路由守衛
阿新 • • 發佈:2018-12-02
路由守衛,當目標路由設定了路由守衛,如果沒有做相應的驗證(如登陸),無法跳轉到目標路由
在路由配置中新增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() } })