vue进阶之路由导航守卫

路由导航守卫

vue-router 提供的导航守卫主要用来通过跳转或取消的方式守卫导航

全局的前置守卫beforeEach是在导航触发时会被回调的：

• to：即将进入的路由Route对象
• from：即将离开的路由Route对象
• next: 在Vue2中我们是通过next函数来决定如何进行跳转的，是在Vue3中我们是通过返回值来控制的，不再推荐使用next函数，这是因为开发中很容易调用多次next；

// /router/index.js
import VueRouter from "vue-router";
import Vue from "vue";

import Home from "../components/Home"
import About from "../components/About"
import Mine from "../components/Mine"
import Login from "../components/Login"
import NotFount from "../components/NotFount"

Vue.use(VueRouter);

let routes = [
    { path:"/", redirect:"/home" },
    { path:"/home", name:"home", component:Home },
    { path:"/about", name:"about", component:About },
    { path:"/mine", name:"mine", component:Mine },
    { path:"/login", name:"login", component:Login },
    { path:"*", component:NotFount },
];

let router = new VueRouter({
    // hash带#    
    // history不带#
    mode:"history",
    routes
})

// 配置全局路由守卫
// to表示去哪
// from表示从哪里来
// next表示是否放行  放行到哪里
router.beforeEach((to,from,next)=>{
    // console.log("from:",from);
    // console.log("to:",to);
    if(to.path !== "/login"){
        // 去的地方不是/login
        // 只有登录了，才能去/home /about /mine
        if(window.isLogin){
            // 表示已登录
            next();
        }else{
           return next("/login");
        }
    }
    next();
});

export default router;

// Home.vue
<template>
  <div>
    <h2>Home</h2>
  </div>
</template>

<script>
export default {
  methods: {
    toAbout() {
     
    },
  },
};
</script>

<style>
</style>

// About.vue
<template>
  <div>
      <h2>About</h2>
  </div>
</template>

<script>
export default {
  methods:{
  }
}
</script>

<style>

</style>

// Mine.vue
<template>
  <div>
      <h2>Mine</h2>
  </div>
</template>

<script>
export default {
  data(){
    return{
    }
  },
}
</script>

<style>

</style>

// Login.vue
<template>
  <div>
      <button @click="login">登录</button>
  </div>
</template>

<script>
export default {
    methods:{
        login(){
            // 给GO上放一个isLogin是true
            window.isLogin = true;
        }
    }
}
</script>

<style>

</style>

// NotFount.vue
<template>
  <div>
      <h2>404</h2>
  </div>
</template>

<script>
export default {

}
</script>

<style>

</style>

// App.vue
<template>
  <div id="app">
    <router-link to="/home" active-class="active">home</router-link> &nbsp;
    <router-link to="/about" active-class="active">about</router-link> &nbsp;
    <router-link to="/mine" active-class="active">mine</router-link> &nbsp;
    <hr>
    <router-view />
  </div>
</template>

<script>
export default {
  name: "App",
  data(){
    return{
    }
  },
  methods:{
  
  },
  components: {
  },
};
</script>

<style lang="less">
.active{
  color: red;
}
</style>

其他导航守卫:

• Vue还提供了很多的其他守卫函数，目的都是在某一个时刻给予我们回调，让我们可以更好的控制程序的流程或者功能
• next.router.vuejs.org/zh/guide/ad…

完整的导航解析流程:

• 导航被触发。
• 在失活的组件里调用 beforeRouteLeave 守卫。
• 调用全局的 beforeEach 守卫。
• 在重用的组件里调用 beforeRouteUpdate 守卫(2.2+)。
• 在路由配置里调用 beforeEnter。
• 解析异步路由组件。
• 在被激活的组件里调用 beforeRouteEnter。
• 调用全局的 beforeResolve 守卫(2.5+)。
• 导航被确认。
• 调用全局的 afterEach 钩子。
• 触发 DOM 更新。
• 调用 beforeRouteEnter 守卫中传给 next 的回调函数，创建好的组件实例会作为回调函数的参数传入。