一、组件内部路由守卫
1. 到达这个组件时,beforeRouteEnter:(to,from,next)=>{}
在进入组件页面时,内部路由守卫可以进行判断,可以阻止/允许访问
to 返回 目标页面信息;
from 返回 跳转页面信息;
next()方法;参数为true时,允许跳转,参数为false时阻止跳转;
2.离开组件时,触发路由守卫
beforeRouteLeave(to,from,next){},参数和以上一样
export default {
beforeRouteEnter(to, from, next) {
//next回调函数中vm是vue实例
next((vm) => {
console.log(vm);// 返回Vue实例化对象
alert(vm.str);//可以通过vm实例获取data中的值,在这个钩子函数上,this指向不是vm
});
},
data() {
return {
str: "你好啊大男孩",
car: "",
house: "",
};
},
}
3.当离开页面时,触发
beforeRouteLeave(to, from, next) {}
beforeRouteLeave(to, from, next) {
if (confirm("客官您真的要走吗?")) {
next();
} else {
next(false);
}
},
4.当路由路径发生变化时,会触发
beforeRouteUpdate(to, from, next) {}
二、全局路由守卫
1.进入页面之前的路由守卫
router.beforeEach((to,from,next)=>{})
回调函数中的参数,to:进入到哪个路由去,from:从哪个路由离开,next:函数,决定是否展示你要看到的路由页面。
2.离开页面时候的路由守卫
router.afterEach((to,from)=>{})
to,from参数和上面一样,注意afterEach()是没有next方法的;
如小例子:当从about页面离开时,弹出提示框;
三、路由元信息
使用mate关键字来配置路由元信息,可以对元信息做分析判断等操作;
四、嵌套路由(二级路由)
路由嵌套就是在父路由配置好后,配置一个children属性,里面放置的的内容跟routes属性下面的内容大体一样,这就是二级路由的配制方法。
嵌套路由的关键字children,在父路由中添加children数组 中添加子路径;