vue导航守卫

拦截器和导航守卫

相同点：都有拦截的意思

不同点：拦截的目的不一样

拦截器：限制请求数据

导航守卫：限制访问页面

 全局前置守卫

---

router.beforeEach((to, from, next) => {
    console.log(to.path);
    console.log(from);
    if (to.path == '/home') {
        let token = localStorage.getItem('token_bef')
        if (token) {
            next()
        } else {
            next('/login')
        }
    } else {

        next()
    }
})

//login组件

methods: {
    fn(){
        localStorage.setItem('token_bef',88888)
    }
}

参数1：to=>往哪里去 $route

参数2：from=>从哪里来 $route

参数3：next是否允许访问

        next() 允许访问ok

        next(false) 不允许访问

        next(路径) 重定向 需要加条件

全局后置守卫

---

router.afterEach((to,from)=>{
    console.log(to);
    console.log(from);
    if(to.path=='/home'&&from.path=='/list'){
        localStorage.removeItem('token_bef')
    }
    next()
})

路由独享守卫

---

{
    path: '/home', component: Home,
    beforeEnter(to, from, next) {
        let token = localStorage.getItem('token_bef')
        if (token) {
            next()
        } else {
            next('/login')
        }
    }
}

组件内的守卫

---

进入之前 

/home/export default{}

beforeRouteEnter(to, from, next) {
    console.log("beforeRouteEnter");
    let token = localStorage.getItem("token_bef");
    if (token) {
    next();
    } else {
    next("/login");
    }
    next();
},

/login/

methods: {
    fn(){
        localStorage.setItem('token_bef',88888)
        this.$router.push('/home')
    }
}

更新之前

router.js

path: '/home/:id?', component: Home,

/home/

<template>
  <div>
    <router-link to="/home/1">ONE</router-link>
    <router-link to="/home/2">TWO</router-link>
    <h1>home-frontpage-----{{ id }}</h1>
  </div>
</template>

/home/export default{}

data() {
    return {
    id: 0,
    };
},

beforeRouteUpdate(to, from, next) {
    console.log("beforeRouteUpdate");
    this.id = to.params.id;
    next();
},

离开之前

home/export default{}

beforeRouteLeave(to, from, next){
    console.log('beforeRouteLeave');
    localStorage.removeItem('token_bef')
    next()
}