vue——前置路由守卫

路由守卫，当目标路由设置了路由守卫，如果没有做相应的验证（如登陆），无法跳转到目标路由

在路由配置中添加meta属性，属性为自定义，用于守卫判断，

注意：父路由设置了路由守卫，子路由也应该设置路由守卫，不然路由守卫会失败

[code]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入口文件中，添加守卫判断

[code]//前置路由守卫
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()
}
})