Vue Router 导航守卫快速了解与上手应用

向右看齐 2022-10-20 00:59 159阅读 0赞

## 一.简介与小案例： ##

嘿，最近你还好吗？ヽ(｡◕‿◕｡)ﾉﾟ。今天，就分享一下vue导航守卫的快速了解与应用，对这部分基础不了解的可以快速上手。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2x1bzE4MzEyNTEzODc_size_16_color_FFFFFF_t_70_pic_center]

在我们通过 vue-router 路由发生跳转时的，也可以用导航这一词概括。导航就是表示路由正在发生改变。而导航守卫就可以说成是监听这一改变。当路由跳转时不能直接跳转，会先经过导航守卫设定的条件，通过条件判断接下来该执行什么操作，给不给跳转，或者应该跳到哪里，或者其它操作。  
   先不谈 vue 提供的导航守卫，假如我们要**自己实现** ‘守卫’ 该怎么实现呢？下面有一个小案例，快速了解 ‘守卫’ 概念。

** 1.首先新建了一个vue脚手架项目，并新建一个login.vue与user.vue文件，（假如login为自己定义的登录页，user为个人信息页）然后在路由配置中添加这两个文件的路径，最后在App.vue页面中添加对应的路由链接。以上，为路由的基本使用，就不演示了。最后运行效果如下：**

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2x1bzE4MzEyNTEzODc_size_16_color_FFFFFF_t_70_pic_center 1]  
其中，路由配置我是这样：

import Vue from 'vue'
    import VueRouter from 'vue-router'
    import Home from '../views/Home.vue'
    import Login from '../views/login/login.vue'
    import User from '../views/user/user.vue'
    
    Vue.use(VueRouter)
    
    const routes = [
      { 
        path: '/',
        name: 'Home',
        component: Home
      },
      { 
        path:'/login',
        component: Login
      },
      { 
        path:'/user',
        component:User
      },
      { 
        path: '/about',
        name: 'About',
        component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
      }
    ]
    
    const router = new VueRouter({ 
      mode: 'history',
      base: process.env.BASE_URL,
      routes
    })
    
    export default router

** 2. 现在，要实现守卫的概念。就是当我没有在登录页进行登录时，直接点击User时，路由不会跳转到user页面，会直接跳转到login登录页面，只有当我在登录页登录后，点击User才能跳转到user页面：**

login.vue页面代码如下，本来登录是要向服务器发一次请求的，因为是演示，所以这里登录不会调用接口。那我们就假如登录后会把账号存储在浏览器本地存储中，当跳转到user页面时，user页面判断本地存储是否存在登录账号信息，存在则显示，否则强行跳到登录页：

<template>
      <div>
        <h3>这是登录页面，登录后才可查看个人信息页面</h3>
        <div>
          <div>账号：<input type="text" v-model="username" /></div>
          <div>密码：<input type="text" v-model="password" /></div>
          <button @click="signIn">登录</button>
        </div>
      </div>
    </template>
    
    <script> export default { data() { return { username: "", password: "", }; }, methods: { signIn() { // 保存账号信息 let token = this.username; // 本地存储 localStorage.setItem("token", token); }, }, }; </script>
    <style scoped> </style>

*使用 localStorage 创建一个本地存储的 name/value 对。*

user.vue页面如下，在生命周期 created 阶段，进行判断是否登录：

<template>
      <div>
        <h2>个人信息页面</h2>
        <div>账号：{
       { username }}</div>
        <div>博客：北极光之夜。</div>
      </div>
    </template>
    
    <script> export default { data() { return { username: "", }; }, methods: { }, created() { // 获取本地存储 var token = localStorage.getItem("token"); console.log(token); // 判断是否有登录信息 if (token) { // 有则给username赋值 this.username = token; } else { // 没有则路由跳转到登录页 this.$router.push("/login"); } }, }; </script>
    <style scoped> </style>

效果如下，没登录时，本地存储没信息，路由不会跳转到user页面，会直接跳转到login登录页面：

![在这里插入图片描述][20210712145916909.gif_pic_center]  
登录后，本地存储有值，可以跳转：

![在这里插入图片描述][20210712145940417.gif_pic_center]  
  
  
  
  
** 以上，就基本演示了下守卫的概念，不过是比较繁琐的，假如有很多页面，我们不可能在每个页面都写一次获取和判断，所以我们要引入 vue 中导航守卫，快速实现守卫。**

## 二.vue导航守卫： ##

[导航守卫官方文档链接：][Link 1]https://router.vuejs.org/zh/guide/advanced/navigation-guards.html

#### 1.全局前置守卫： ####

全局前置守卫用于控制**每一次**路由跳转，叫做 router.beforeEach，可以使用 router.beforeEach 注册一个全局前置守卫。这个一般写在vue项目中的src文件夹下的 main.js 中：  
我的main.js文件内容：

import Vue from 'vue'
    import App from './App.vue'
    import router from './router'
    import store from './store'
    Vue.config.productionTip = false
    
    // 添加全局前置守卫
    router.beforeEach((to,from,next)=>{ 
         console.log(to,from,next);
         next();
    })
    
    new Vue({ 
      router,
      store,
      render: h => h(App)
    }).$mount('#app')

可以看到，写法如下：

router.beforeEach((to,from,next)=>{ 
         console.log(to,from,next);
         next();
    })

看控制台输出，to,from,next代表什么：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2x1bzE4MzEyNTEzODc_size_16_color_FFFFFF_t_70_pic_center 2]

看得出to、from都是对象，next为方法。还是直接上概念，其中to、from、next 参数意思如下：

<table> 
 <thead> 
  <tr> 
   <th>参数</th> 
   <th>意义</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>to</td> 
   <td>代表将要跳到哪个路由</td> 
  </tr> 
  <tr> 
   <td>from</td> 
   <td>代表之前是来自哪个路由</td> 
  </tr> 
  <tr> 
   <td>next（）</td> 
   <td>进行正常跳转</td> 
  </tr> 
  <tr> 
   <td>next（false）</td> 
   <td>取消跳转</td> 
  </tr> 
  <tr> 
   <td>next（“路径”）或者next({ path: ‘路径’ })</td> 
   <td>路由重定向，跳转到其它页面</td> 
  </tr> 
 </tbody> 
</table>

需要注意的是，要确保 next 函数在任何给定的导航守卫中都被严格调用一次。它可以出现多于一次，但是只能在所有的逻辑路径都不重叠的情况下，否则钩子永远都不会被解析或报错。

** 如，我现在要实现无法跳转到login页面，其它页面能正常跳转，应该如下实现：**

router.beforeEach((to,from,next)=>{ 
      //如果将要跳到login，则取消跳转
        if(to.path=='/login'){ 
          next(false);
        }else{ 
          // 否则正常跳转
          next();
        }
    })

效果：

![在这里插入图片描述][20210712170234849.gif_pic_center]  
现在，用全局前置守卫实现第一大点那个小案例：

router.beforeEach((to,from,next)=>{ 
       if(to.path == '/user'){       
          if(localStorage.getItem("token")){ 
             next();
          }else{ 
            next('/login');
          }
    
       }else{ 
         next();
       }
    })

看，也是一样可以的：

![在这里插入图片描述][20210712183520736.gif_pic_center]  
假如现在进入about页面也要登录才能进，则如下直接在 if 里添加一个或条件就好：

router.beforeEach((to,from,next)=>{ 
       if(to.path == '/user' || to.path == '/about'){       
          if(localStorage.getItem("token")){ 
             next();
          }else{ 
            next('/login');
          }
    
       }else{ 
         next();
       }
    })

#### 2. 路由守卫： ####

运行在路由上的守卫，只有进入到当前路由页面的时候才会执行的守卫函数，叫做 beforeEnter。它一般直接在路由配置里写的。

如我在/user的配置对象里写，只有在user页面这个守卫在生效：

const routes = [
      { 
        path: '/',
        name: 'Home',
        component: Home
      },
      { 
        path:'/login',
        component: Login
      },
      // 在user这里面写
      { 
        path:'/user',
        component:User,
        beforeEnter: (to, from, next) => { 
               // 输出看看
          console.log(to,from,next);
        }
      },
      { 
        path: '/about',
        name: 'About',
        component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
      }
    ]

看效果，只有在点击user页面才会有输出：

![在这里插入图片描述][2021071220224162.gif_pic_center]  
 这些守卫与全局前置守卫的方法参数是一样的。用法也是差不多一样的 。现在在路由守卫里实现第一大点的案例：

const routes = [
      { 
        path: '/',
        name: 'Home',
        component: Home
      },
      { 
        path:'/login',
        component: Login
      },
      // 在user这里面写
      { 
        path:'/user',
        component:User,
        beforeEnter: (to, from, next) => { 
          if(localStorage.getItem('token')){ 
            next();
          }else{ 
            next('/login');
          }
        }
      },
      { 
        path: '/about',
        name: 'About',
        component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
      }
    ]

效果：

![在这里插入图片描述][20210712204407406.gif_pic_center]

#### 3.组件内守卫： ####

可以在路由组件内直接定义以下路由导航守卫：

<table> 
 <thead> 
  <tr> 
   <th>名称</th> 
   <th>调用时期</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>beforeRouteEnter</td> 
   <td>进入组件之前执行</td> 
  </tr> 
  <tr> 
   <td>beforeRouteUpdate</td> 
   <td>组件复用时执行</td> 
  </tr> 
  <tr> 
   <td>beforeRouteLeave</td> 
   <td>离开组件之前执行</td> 
  </tr> 
 </tbody> 
</table>

它们也是函数，跟生命周期钩子函数有点像，跟data（）、created（）这些函数也是同一个级别的。它既然是写在组件里的，那说明它也是在该组件中有效的。比如在user.vue页面写：

**beforeRouteEnter：**

<template>
      <div>
        <h2>个人信息页面</h2>
        <div>账号：{
       { username }}</div>
        <div>博客：北极光之夜。</div>
      </div>
    </template>
    
    <script> export default { data() { return { username: "", }; }, // 进入组件之前调用，beforeRouteEnter，这个比较少用 beforeRouteEnter(to, from, next) { console.log(to, from, next); next(); }, methods: { }, created() { }, }; </script>
    <style scoped> </style>

这些守卫与全局前置守卫的方法参数也是是一样的。现在我们同样实现第一大点的小案例，在这之前需要注意的是不能获取组件实例的this，因为当守卫执行前，组件实例还没被创建：

// 进入组件之前调用
      beforeRouteEnter(to, from, next) { 
        if (to.path == "/user") { 
          if (localStorage.getItem("token")) { 
            next();
          } else { 
            next("/login");
          }
        }
      },

一样的效果：

![在这里插入图片描述][20210712222030870.gif_pic_center]  
**beforeRouteLeave：**

接下来使用 **beforeRouteLeave**，它类似于生命周期函数的beforeDestroy，表示离开该组件时执行的守卫函数。离开就是说我要去其它页面了，比如跳去home页面，注意如果没有调用next将离不开该组件。方法参数也是一样的：

它有什么使用场景呢？

比如因为用户误触使得要离开这个页面时，可以通过beforeRouteLeave函数跳出一个提示框，提示是否真的离开该页面（提示离开可能不会保存当前页面用户的输入的信息等）。实现如下：

<template>
      <div>
        <h2>个人信息页面</h2>
        <div>账号：{
       { username }}</div>
        <div>博客：北极光之夜。</div>
        <div>输入1：<input type="text" /></div>
        <div>输入2：<input type="text" /></div>
        <div>输入3：<input type="text" /></div>
      </div>
    </template>
    
    <script> export default { data() { return { username: "", }; }, // 离开该组件时执行的守卫函数 beforeRouteLeave(to, from, next) { const r = window.confirm("那你走？输入信息将不会保留"); if (r) { next(); } else { next(false); } }, methods: { }, created() { }, }; </script>
    <style scoped> </style>

window.confirm() 方法方法用于显示一个带有指定消息和确认及取消按钮的对话框。如果访问者点击"确定"，此方法返回true，否则返回false。

运行效果：  
![在这里插入图片描述][20210712232551593.gif_pic_center]  
**beforeRouteUpdate**：

在组件复用时执行beforeRouterUpdate，什么是复用呢？当**连续**进入同一个动态路由页面时会产生复用。  
 什么是动态路由呢？如果某些路由规则的一部分是一样的，只有另一部分是动态变化的，那我们可以把这些动态变化的部分形成路由参数，这些参数就叫做动态路由匹配。[动态路由请看这篇文章第五点][Link 2]：https://auroras.blog.csdn.net/article/details/117635206，这里就不细说了。

首先，在项目新建一个 details.vue文件，做为详情页，然后配置动态路由规则：

{ 
        path:'/details/:id',
        component: Details
      },

然后添加两个路由链接：

...略
          <router-link to="/details/1">详情1</router-link> |
          <router-link to="/details/2">详情2</router-link> |
    ...略

效果如下，此时**连续进入**就发生了组件的复用，它们显示的其实都是details.vue文件。因为是复用，vue为了节省性能将会导致该组件生命周期钩子函数并**不会**再重头开始创建执行，所以这时beforeRouteUpdate就很有用处了：

![在这里插入图片描述][20210713140159513.gif_pic_center]  
设置beforeRouteUpdate守卫函数，details.vue文件内容如下：

<template>
      <div>详情页</div>
    </template>
    
    <script> export default { data() { return { }; }, // 守卫函数 beforeRouteUpdate(to, from, next) { console.log("复用了~"); next(); }, methods: { }, }; </script>
    <style scoped> </style>

look：

![在这里插入图片描述][20210713142112936.gif_pic_center]  
 现在，实现通过beforeRouteUpdate守卫函数，当组件发生复用时，依旧能获取组件参数（生命周期created函数是不行的，因为组件复用时它不会重新执行）：

<template>
      <div>详情页 {
       { id }}</div>
    </template>
    
    <script> export default { data() { return { id: "", }; }, beforeRouteUpdate(to, from, next) { this.id = to.params.id; next(); }, methods: { }, }; </script>
    <style scoped> </style>

看效果：

![在这里插入图片描述][2021071314374888.gif_pic_center]

## 三.总结： ##

持续更新，建议收藏。  
下次见啦~

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2x1bzE4MzEyNTEzODc_size_16_color_FFFFFF_t_70_pic_center 3]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2x1bzE4MzEyNTEzODc_size_16_color_FFFFFF_t_70_pic_center]: /images/20221004/c10db87a42b74dfea6b79630da820298.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2x1bzE4MzEyNTEzODc_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221004/3dba241e745743f69021246589d7dba1.png
[20210712145916909.gif_pic_center]: /images/20221004/c7c71a6a45de4be68c3efcd8b6b6e434.png
[20210712145940417.gif_pic_center]: /images/20221004/67eb817ce09a42e1906e5858dd9c2028.png
[Link 1]: https://router.vuejs.org/zh/guide/advanced/navigation-guards.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2x1bzE4MzEyNTEzODc_size_16_color_FFFFFF_t_70_pic_center 2]: /images/20221004/9635bf9d3dbf4294a040b0fc1de59064.png
[20210712170234849.gif_pic_center]: /images/20221004/6895dc967a1141a2afd64ef44e3e1c37.png
[20210712183520736.gif_pic_center]: /images/20221004/bf84a30622be4b279ac38d90ac6922cd.png
[2021071220224162.gif_pic_center]: /images/20221004/5d88a4623ca5422181b6aaaac8fbed2f.png
[20210712204407406.gif_pic_center]: /images/20221004/7078fd2319724aea959635efabfe7c06.png
[20210712222030870.gif_pic_center]: /images/20221004/a8033ef914294fc4a31c2e283bbffb94.png
[20210712232551593.gif_pic_center]: /images/20221004/d9c8587997ec457db6a1c721672a34dc.png
[Link 2]: https://auroras.blog.csdn.net/article/details/117635206
[20210713140159513.gif_pic_center]: /images/20221004/2a243950635d48f2902ccd6403927d5e.png
[20210713142112936.gif_pic_center]: /images/20221004/945da0a09d754e4b8e2dc37663742fab.png
[2021071314374888.gif_pic_center]: /images/20221004/51f667f70da744a79d33ffc83e6112fa.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2x1bzE4MzEyNTEzODc_size_16_color_FFFFFF_t_70_pic_center 3]: /images/20221004/e0d7c2648fb3466790b06ddc8f9326d7.png