Vue 独享路由守卫
独享路由守卫是单个路由享用的路由守卫
beforeEnter:(to,from,next)=>{ }
在路由配置router->index.js编写代码
//引入文件,该文件专门用于创建整个应用的路由器
import VueRouter from 'vue-router'
//引入组件
import About from '../components/Home'
import Home from '../components/About'
import Message from '../components/Message'
import Detail from '../components/Detail'
//创建并暴露一个路由器
const router = new VueRouter({
routes: [
{
name:'about',
path: '/about',
component: About
},
{
name:'home',
path: '/home',
component: Home,
//独享前置路由守卫
beforeEnter:(to,from,next)=>{
//逻辑和全局路由配置一样
//to是你要跳转到那个路由组件
//from是你从哪个路由组件跳转过来的
//可以在next()前设置条件,当符合条件就放行,比如:
if(localStorage.getItem('school')==='atguigu'){
next()
}
}
children: [{
name:'message/:id/:title', //占位符
path: "message",
component: Message
}]
}
]
})
//独享路由守卫没有后置守卫,可以直接使用全局后置守卫
//全局后置-路由守卫----初始化的时候被调用、每次路由切换之后被调用
router.afterEach((to,from)=>{ //注意全局后置-路由守卫没有next
})
export default router