02导航守卫 （2018/11/28）
导航守卫 (进入到每个路由之前判断路径)
“导航”意味着路由正在发生改变
正如其名，vue-router 提供的导航守卫主要通过跳转或取消的方式来守卫导航。
植入导航守卫的方式有三种：全局的, 单个路由独享的, 或者组件级的。
一、全局守卫
(1)全局前置守卫
router.beforeEach 进入路由之前所做的事
router.beforeEach((to, from, next) => {
// ...
next();
})
当一个导航触发时，全局前置守卫按照创建顺序调用。守卫是异步解析执行，此时导航在所有守卫 resolve 完之前一直处于 等待中。
-
to： Route即将要进入的目标 路由
-
from: Route当前导航正要离开的路由
-
next: Function一定要调用该方法来 resolve 这个钩子。执行效果依赖 next 方法的调用参数。
(2)全局后置守卫
router.afterEach 进入路由之后所做的事 没有next()
router.afterEach((to, from) => {
// ...
})
App.vue(全局守卫)
export default {
name: 'App',
created(){
this.$router.beforeEach((to,from,next)=>{
console.log(to,from) //可以在path中看到 相对应的路径
this.changeTitle(to.path) //1)通过to.path的属性拿到对应得路由路径
next(); //切换组件的动作，一定要写
})
},
methods:{
changeTitle(path){
switch(path){ //通过对应的路径更改浏览器页面窗口的名称
case '/all/list':document.title='first';break;
case '/all/computer':document.title='second';break;
}
},
二、路由独享的守卫
beforeEnter
是在index.js中的单个路由中单独设定的 在执行之前可以执行一个钩子函数，如果通过了验证next（）； 如果没有 显示警告信息
index.js
{
path:'/all/:type',
name:'all',
component:All,
beforeEnter:(to,from,next)=>{
if(sessionStorage.getItem("user")){ //判断用户登陆信息
next();
}else{
alert("请登陆")
}
}
}
三、组件内的守卫
beforeRouteEnter (to, from, next) {
// 在渲染该组件的对应路由被 confirm 前调用
// 不！能！获取组件实例 `this`，因为当守卫执行前，组件实例还没被创建
// 比beforeCreate的执行时间要早 因为beforeCreate函数拿不到数据，所以beforeRouterEnter也拿不到数据
// 要想可以拿到数据 需要使用 next（vm=>{}）这个回调函数 通过访问vm拿到数据
},
beforeRouteUpdate (to, from, next) {
// 在当前路由改变，但是该组件被复用时调用
// 举例来说，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候，
// 由于会渲染同样的 Foo 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
// 可以访问组件实例 `this`
//用于切换 在每次路由变化的时候都能拿到最新的路由参数
},
beforeRouteLeave (to, from, next) {
// 导航离开该组件的对应路由时调用 这个离开守卫通常用来禁止用户在还未保存修改前突然离开。该导航可以通过 next(false) 来取消。
// 可以访问组件实例 `this`
}}
all.vue
beforeRouterEnter(to,from,next){
console.log("beforeRouterEnter");
next((vm)=>{
vm.type = vm.$route.params.type; //获取对应的路径参数
vm.getData()
})
},
beforeRouteUpdate(to,from,next){
this.type=to.params.type;
this.getData()
next()
},
beforeRouterLeave(to,from,next){
if(confirm("确定要离开组件吗？")){
next();
}else{
next(false);
}
}
