【Vue.js 知识量化】vue-router 详解

太过爱你忘了你带给我的痛 2022-08-29 13:52 183阅读 0赞

### vue-router 详解 ###

*  认识路由
 *   *  后端路由（了解）
     *  前端路由
     *   *  URL 的 hash
         *  HTML5 的 history 模式（5 种）
 *  vue-router
 *   *  安装和使用 vue-router
     *   *  路由的默认路径
         *  HTML5 的 History 模式
     *  路由懒加载
     *  嵌套路由
     *   *  嵌套路由默认路径
     *  路由传递参数
     *  $route 获取参数
     *  导航守卫
     *  keep-alive
 *  实战项目

内容概述：

*  认识路由
 *  vue-router 基本使用
 *  vue-router 嵌套路由
 *  vue-router 参数传递
 *  vue-router 导航守卫
 *  keep-alive

# 认识路由 #

> 路由 (routing) 是一个网络工程里面的术语，就是通过互联的网络把信息从源地址传输到目的地址的活动。 — 维基百科
> 
>  *  路由中有一个非常重要的概念叫路由表，路由表本质上就是一个映射表，决定了数据包的指向

## 后端路由（了解） ##

早期的网站开发整个 HTML 页面是由服务器来渲染的，

*  服务器直接生产渲染好对应的 HTML 页面，返回给客户端进行展示。

但是，一个网站，这么多页面服务器如何处理呢?

*  一个页面有自己对应的网址，也就是 URL
 *  URL 会发送到服务器，服务器会通过正则对该 URL 进行匹配，并且最后交给一个 Controller 进行处理
 *  Controller 进行各种处理，最终生成 HTML 或者数据，返回给前端，这就完成了一个IO操作.  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ_size_1_color_FFFFFF_t_70]

上面的这种操作，就是**后端路由**

*  当我们页面中需要请求不同的路径内容时，交给服务器来进行处理，服务器渲染好整个页面，并且将页面返回给客户端。  
    这种情况下渲染好的页面，不需要单独加载任何的 js 和 css，可以直接交给浏览器展示，这样也有利于 SEO 的优化

后端路由的缺点：

*  整个页面的模块由后端人员来编写和维护的
 *  前端开发人员如果要开发页面，需要通过 PHP 和 Java 等语言来编写页面代码
 *  HTML 代码和数据以及对应的逻辑会混在一起，编写和维护都是很麻烦的事情

## 前端路由 ##

前后端分离阶段：

*  随着 Ajax 的出现，有了前后端分离的开发模式
 *  后端只提供 API 来返回数据，前端通过 Ajax 获取数据，通过 js 将数据渲染到页面中
 *  这样做最大的优点就是前后端责任清晰，后端专注于数据上，前端专注于交互和可视化上
 *  并且对于移动端 (iOS / Android)，后端不需要进行任何处理，依然使用之前的一套 API
 *  目前很多的网站依然采用这种模式开发  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ_size_1_color_FFFFFF_t_70 1]

**单页面富应用阶段 (SPA)**：

*  SPA 最主要的特点就是在前后端分离的基础上加了一层前端路由
 *  也就是前端来维护一套路由规则  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ_size_1_color_FFFFFF_t_70 2]

前端路由的核心：**改变 URL，但是页面不进行整体的刷新**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ_size_1_color_FFFFFF_t_70 3]

### URL 的 hash ###

URL 的 hash 也就是**锚点(\#)**，本质上是改变 `window.location.href` 属性

*  我们可以通过直接赋值 `location.hash` 来改变 href，但是页面不发生刷新  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ_size_1_color_FFFFFF_t_70 4]

### HTML5 的 history 模式（5 种） ###

history 接口是 HTML5 新增的，它有五种模式改变 URL 而不刷新页面

*  `history.pushState()`  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ_size_1_color_FFFFFF_t_70 5]
 *  `history.replaceState()`  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ_size_1_color_FFFFFF_t_70 6]
 *  `history.go()`  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ_size_1_color_FFFFFF_t_70 7]

补充：

*  `history.back()` 等价于 `history.go(-1)`
 *  `history.forward()` 等价于 `history.go(1)`
 *  这几个接口等同于浏览器界面的前进后退

# vue-router #

> 目前前端流行的三大框架，都有自己的路由实现：
> 
>  *  Angular 的 ngRouter
>  *  React 的 ReactRouter
>  *  Vue 的 vue-router

vue-router 是 Vue.js 官方的路由插件，它和 Vue.js 是深度集成的，适合用于构建单页面应用

> vue-router 官方网站: [https://router.vuejs.org/zh/][https_router.vuejs.org_zh]

vue-router 是基于路由和组件的

*  路由用于设定访问路径，将路径和组件映射起来
 *  在 vue-router 的单页面应用中，页面的路径的改变就是组件的切换.

## 安装和使用 vue-router ##

我们已经学习了 webpack，后续开发中我们主要是通过工程化的方式进行开发的

安装 vue-router

npm install vue-router --save

在模块化工程中使用它（因为是一个插件，所以可以通过 `Vue.use()` 来安装路由功能）

*  导入路由对象，并且调用 `Vue.use(VueRouter)`
 *  创建路由实例，并且传入路由映射配置
 *  在 Vue 实例中挂载创建的路由实例

使用 vue-router 的步骤：

*  创建路由组件
 *  配置路由映射: 组件和路径映射关系
 *  使用路由：通过 `<router-link>` 和 `<router-view>`

--------------------

路由的配置一般不需要自行配置，脚手架中都配好了，着重关注路由的使用。

*  `<router-link>`：该标签是一个 vue-router 中内置的组件，它会被渲染成一个`<a>` 标签
 *  `<router-view>`：该标签会根据当前的路径，动态渲染出不同的组件
 *  网页的其他内容，比如顶部的标题 / 导航，或者底部的一些版权信息等会和 `<router-view>` 处于同一个等级
 *  在路由切换时，切换的是 `<router-view>` 挂载的组件，其他内容不会发生改变  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ_size_1_color_FFFFFF_t_70 8]

路由使用效果：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ_size_1_color_FFFFFF_t_70 9]

### 路由的默认路径 ###

默认情况下，进入网站的首页，我们希望 `<router-view>` 渲染首页的内容

*  如何可以让路径默认跳到到首页, 并且 `<router-view>` 渲染首页组件呢?
 *  在路由配置中配置对 `'/'` 路径的映射，redirect 是重定向  
    ![在这里插入图片描述][20210720142824173.png]

### HTML5 的 History 模式 ###

我们前面说过改变路径的方式有两种：

*  URL 的 hash
 *  HTML5 的 history
 *  默认情况下，路径的改变使用的 URL 的 hash

可以通过配置使用 HTML5 的 History 模式，参考[官方文档][Link 1]

## 路由懒加载 ##

> 官方解释：当打包构建应用时，Javascript 包会变得非常大，影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样就更加高效了。

路由懒加载的主要作用就是：将路由对应的组件打包成一个个的 js 代码块，只有在这个路由被访问到的时候，才加载对应的组件。

路由懒加载的效果：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ_size_1_color_FFFFFF_t_70 10]

--------------------

代码中懒加载的方式：

*  方式一：结合 Vue 的异步组件和 Webpack 的代码分析

const Home = resolve => {  require.ensure(['../components/Home.vue'], 
    () => {  resolve(require('../components/Home.vue')) })};

*  方式二：AMD 写法

const About = resolve => require(['../components/About.vue'], resolve);

*  方式三：使用 ES6 语法来组织 Vue 异步组件和 Webpack 的代码分割

const Home = () => import('../components/Home.vue')

## 嵌套路由 ##

嵌套路由是一个很常见的功能，

*  比如在 home 页面中，希望通过 /home/news 和 /home/message 访问一些内容
 *  一个路径映射一个组件, 访问这两个路径也会分别渲染两个组件  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ_size_1_color_FFFFFF_t_70 11]

实现嵌套路由的两个步骤：

*  创建对应的子组件，并且在路由映射中配置对应的子路由
 *  在组件内部使用 `<router-view>` 标签

--------------------

嵌套路由示例：

1.  定义两个组件  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ_size_16_color_FFFFFF_t_70]
2.  使用 router-link 和 router-view 展示子组件  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ_size_16_color_FFFFFF_t_70 1]
3.  配置路由  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ_size_16_color_FFFFFF_t_70 2]
4.  展示效果  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ_size_16_color_FFFFFF_t_70 3]

--------------------

### 嵌套路由默认路径 ###

嵌套路由也可以配置默认的路径，配置方式如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ_size_16_color_FFFFFF_t_70 4]

## 路由传递参数 ##

传递参数主要有两种类型：params 和 query

**params 的类型**：

*  配置路由格式：`/router/:id`
 *  传递的方式：**在 path 后面跟上对应的值**
 *  传递后形成的路径：`/router/123`，`/router/abc`

**query 的类型**：

*  配置路由格式：`/router`，也就是普通配置
 *  传递的方式：**对象中使用 query 的 key 作为传递方式**
 *  传递后形成的路径：`/router?id=123`，`/router?id=abc`

两种使用方式：

*  `<router-link>`  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ_size_16_color_FFFFFF_t_70 5]
 *  JavaScript 代码方式  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ_size_16_color_FFFFFF_t_70 6]

## $route 获取参数 ##

获取参数通过 `$route` 对象获取的

在使用了 vue-router 的应用中，路由对象会被注入每个组件中，赋值为 `this.$route`，并且当路由切换时，路由对象会被更新。

通过 `$route` 获取传递的信息如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ_size_16_color_FFFFFF_t_70 7]

> `$route` 和 `$router` 的区别：
> 
>  *  `$router` 为 **VueRouter 实例**，想要导航到不同 URL，使用 `$router.push` 方法
>  *  `$route` 为**当前 router 跳转对象**，里面可以获取 name、path、query、params 等  
>     ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ_size_16_color_FFFFFF_t_70 8]

## 导航守卫 ##

考虑一个需求：在一个SPA应用中，如何改变网页的标题呢？

*  网页标题是通过 `<title>` 来显示的，但是 SPA 只有一个固定的 HTML，切换不同的页面时，标题并不会改变
 *  但是我们可以通过 JavaScript 来修改 `<title>` 的内容  
    `window.document.title = '新的标题'`
 *  那么在 Vue 项目中，在哪里修改？什么时候修改比较合适呢？

普通的修改方式：

*  我们比较容易想到的修改标题的位置是每一个路由对应的组件 .vue 文件中
 *  通过 mounted 声明周期函数，执行对应的代码进行修改即可
 *  但是当页面比较多时，这种方式不容易维护（因为需要在多个页面执行类似的代码）

以上问题可以使用导航守卫解决，什么是**导航守卫**?

*  vue-router 提供的导航守卫主要用来**监听监听路由的进入和离开的**
 *  vue-router 提供了 **beforeEach** 和 **afterEach** 的钩子函数，它们会在路由即将改变前和改变后触发

--------------------

我们可以利用 beforeEach 来完成标题的修改

*  首先，我们可以在钩子当中定义一些标题，可以利用 meta 来定义  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ_size_16_color_FFFFFF_t_70 9]
 *  其次，利用导航守卫，修改我们的标题  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ_size_16_color_FFFFFF_t_70 10]
 *  导航钩子的三个参数解析：  
    **to**：即将要进入的目标的路由对象  
    **from**：当前导航即将要离开的路由对象  
    **next**：调用该方法后，才能进入下一个钩子

导航守卫注意点：

*  如果是后置钩子, 也就是 afterEach，不需要主动调用 next() 函数
 *  上面我们使用的导航守卫，被称之为全局守卫

> 更多内容，可以查看官网进行学习：[Vur Router 导航守卫][Vur Router]

## keep-alive ##

keep-alive 是 Vue 内置的一个组件，可以**使被包含的组件保留状态，避免重新渲染**。

keep-alive 有两个非常重要的属性:

*  include - 字符串或正则表达，只有匹配的组件会被缓存
 *  exclude - 字符串或正则表达式，任何匹配的组件都不会被缓存

router-view 如果直接被包在 keep-alive 里，所有路径匹配到的视图组件都会被缓存：  
![在这里插入图片描述][20210721112515948.png]

# 实战项目 #

![在这里插入图片描述][0140ca951088f6e1e9e1c85698ab367e.png]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ_size_1_color_FFFFFF_t_70]: /images/20220829/28d7972369ef4ea396c47ad659c10690.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ_size_1_color_FFFFFF_t_70 1]: /images/20220829/62a4743c8ef147f4b3505191337ebd3a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ_size_1_color_FFFFFF_t_70 2]: /images/20220829/5fdf6496865640748c30980ed0fdb521.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ_size_1_color_FFFFFF_t_70 3]: /images/20220829/07afdbd4c14640e48486cc5c6401d467.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ_size_1_color_FFFFFF_t_70 4]: /images/20220829/04349615d4704841aff96a694c1f2c43.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ_size_1_color_FFFFFF_t_70 5]: /images/20220829/2c9ca2e3e90c40b481078f42c89532d2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ_size_1_color_FFFFFF_t_70 6]: /images/20220829/b19fd7fd50bb438d8796dbdf7142f001.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ_size_1_color_FFFFFF_t_70 7]: /images/20220829/be55231e114c4fa8a3e3196b72f7b255.png
[https_router.vuejs.org_zh]: https://router.vuejs.org/zh/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ_size_1_color_FFFFFF_t_70 8]: /images/20220829/5cc6d0124e15467394a14752ad718299.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ_size_1_color_FFFFFF_t_70 9]: /images/20220829/2e12b84edead48b7b18dd11c4ffc9336.png
[20210720142824173.png]: /images/20220829/fa53f0c77a7c46f0841b44a216307272.png
[Link 1]: https://next.router.vuejs.org/zh/guide/essentials/history-mode.html#%E4%B8%8D%E5%90%8C%E7%9A%84%E5%8E%86%E5%8F%B2%E6%A8%A1%E5%BC%8F
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ_size_1_color_FFFFFF_t_70 10]: /images/20220829/389f29339d2b40c4bd194f00dcb89840.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ_size_1_color_FFFFFF_t_70 11]: /images/20220829/52ca7dacf67140c5b119a8d4080e9a74.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ_size_16_color_FFFFFF_t_70]: /images/20220829/8d897923a252419fba8b5d140672f7e3.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ_size_16_color_FFFFFF_t_70 1]: /images/20220829/b922244bbcf2465a939a0c78acf94244.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ_size_16_color_FFFFFF_t_70 2]: /images/20220829/bb645eb59bd44bd8b525bf3ef4e5151c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ_size_16_color_FFFFFF_t_70 3]: /images/20220829/5ce794c5801f44838f5b3c3b29993f88.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ_size_16_color_FFFFFF_t_70 4]: /images/20220829/677b348b63c54abfb72812280d145ac0.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ_size_16_color_FFFFFF_t_70 5]: /images/20220829/7d4c97e23a3f4d97a7515928d6fdaf9f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ_size_16_color_FFFFFF_t_70 6]: /images/20220829/c334524f1ecc4f31b6c8b4e19e728607.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ_size_16_color_FFFFFF_t_70 7]: /images/20220829/22e910cbbf0a4ae291319ab69aa1de53.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ_size_16_color_FFFFFF_t_70 8]: /images/20220829/25a5998a04a64b889bd6b0334f43a5cc.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ_size_16_color_FFFFFF_t_70 9]: /images/20220829/e162a15b61ac4aeda606e85fd60e60ef.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ_size_16_color_FFFFFF_t_70 10]: /images/20220829/0943d30e6fc6464cb25dded52080b9e5.png
[Vur Router]: https://router.vuejs.org/zh/guide/advanced/navigation-guards.html#%E5%85%A8%E5%B1%80%E5%89%8D%E7%BD%AE%E5%AE%88%E5%8D%AB
[20210721112515948.png]: /images/20220829/04056e0027454751b20223fa3ac56a0e.png
[0140ca951088f6e1e9e1c85698ab367e.png]: /images/20220829/72da4d52a30f45fb9753e43a88da7855.png