第一部分:前置,后置,独享前置案例
在store中的index.js文件中编写
//该文件专门用于创建整个路由
import VueRouter from 'vue-router'
//引入组件
import AboUt from '../pages/AbouT'
import HoMe from '../pages/HoMe'
import NeWer from '../pages/NeWer'
import MessaGe from '../pages/MessaGe'
import DetAil from '../pages/DetAil'
//创建并暴露一个路由器
const router = new VueRouter({
routes:[
//一级路由
{
//路由还可以给定一个名字,便于在传参数的时候使用
name:'dianjiyi',
//这个是路径HTML中的路径
path:'/about',
//是组件的路径
component:AboUt,
},
{
name:'dianjier',
path:'/home',
component:HoMe,
//二级路由
children:[
{
name:'dianjisan',
//二级路由HTML路径值不要加/
path:"news",
component:NeWer,
//若要在配置对象中添加数据(必须使用meta才可以) 这里指判断是否要开启判断权限
meta:{isfors:true}
},
{
name:'dianjisi',
path:"message",
component:MessaGe,
meta:{isfors:true},
//独享前置守卫,只有一个,没有后置守卫,独享前置守卫是 beforeEnter:() {} 同全局前置守卫类似,参数及含义相同,这里只是单一的,并且
//需要在配置对象中去编写
beforeEnter:(to,from,next)=>{
console.log('独享路由守卫,初识化了')
// next()
//动态决定是否放行
//从本地存储中获取数据,查看有没有学校school是等于atguigu的,若有则展示,没有则不展示
// if(localStorage.getItem('school')==='atguigu'){
// next()
// }
//根据路径、name姓名等去判断
//若要在配置对象中添加数据(必须使用meta:{}才可以)
// if(to.path==="/home/news" || to.path==="/home/message"){
if(to.meta.isfors){
//根据学校去判断是否满足条件,不满足则弹窗
if(localStorage.getItem('school')==='atguigu'){
next()
}else{
alert('学校名不对,无权查看!')
}
}else{
//若以上都不满足,只满足第一个那么就给定展示第一个页面
next()
}
},
children:[
{
name:'dianjiwu',
path:"detil",
component:DetAil,
}
]
}
]
}
]
})//全局前置路由守卫---初始化的时候被调用,每一次路由切换之前被调用,这里有三个参数
//第一个参数是去哪,第二个参数是从哪里来,第三个参数是下一步(放行),没有第三个参数则不能展示页面
router.beforeEach((to,from,next)=>{
console.log('前置路由守卫,初识化了')
// next()
//动态决定是否放行
//从本地存储中获取数据,查看有没有学校school是等于atguigu的,若有则展示,没有则不展示
// if(localStorage.getItem('school')==='atguigu'){
// next()
// }
//根据路径、name姓名等去判断
//若要在配置对象中添加数据(必须使用meta:{}才可以)
// if(to.path==="/home/news" || to.path==="/home/message"){
if(to.meta.isfors){
//根据学校去判断是否满足条件,不满足则弹窗
if(localStorage.getItem('school')==='atguigu'){
next()
}else{
alert('学校名不对,无权查看!')
}
}else{
//若以上都不满足,只满足第一个那么就给定展示第一个页面
next()
}
})//全局后置路由守卫---初始化的时候被调用,每一次路由切换之前被调用,这里有三个参数
//第一个参数是去哪,第二个参数是从哪里来,第三个参数是下一步(放行),没有第三个参数则不能展示页面
//后置守卫没有next next打印出来显示undefined
router.afterEach((to,from)=>{
console.log('后置路由守卫',to,from);
})
export default router
组件内路守卫:(在组件中编写)
1,通过路由规则,进入组件时被调用
,2,通过路由规则,离开组件时被调用
在使用路由守卫时,必须要在index.js文件中添加meta:{ }
下方是内路由守卫:
添加next()