Vue2.x - Vue Router

小鱼儿 2023-09-28 11:15 56阅读 0赞

**目录**

Vue与SPA

什么是SPA

简单了解SPA

什么是MPA

SPA相较于MPA的优点

实现SPA的几个关键点

理解SPA单页面架构

什么是前端路由

锚链接与URL中的hash值

通过hashchange事件实现前端路由

编程式导航

浏览器历史记录&前进后退功能

Vue与SPA

通过Vue认识SPA单页面丰富内容的来源

在Vue中实现前端路由

Vue Router

安装和配置Vue Router

下载vue-router

引入vue-router到项目中

注册VueRouter插件

创建VueRouter实例并将其关联vm.$options.router

路由模块

认识VueRouter

路由器和路由

routes配置属性

路由器的第二个工作

router-link

router-view

认识路由组件

什么是路由组件

路由组件的创建和销毁时机

keep-alive组件

两个新的生命周期钩子actived,deactived

路由组件实例上的$route属性

路由组件上的$router属性

嵌套路由

什么是嵌套路由

嵌套路由的实现

路由重定向 redirect属性

默认子路由

动态路由

什么是动态路由

$route.params

将$route.params转为组件props

路由配置属性props的三种用法

查询参数路由

什么是查询参数路由

$route.query

通过路由配置属性props简化$route.query的获取

命名路由

什么是命名路由

为什么需要命名路由

router-link to属性的对象式写法

命名router-view

路由配置属性components的对象式写法

命名router-view

编程式导航

什么是导航

声明式导航

编程式导航

router.push

router.replace

router.go

导航守卫

什么是导航守卫

为什么需要导航守卫

导航守卫的分类

全局导航前置守卫

关于next函数的四种调用方式

全局导航后置守卫

路由元信息属性 meta

路由独享守卫

组件内守卫

完整的导航解析流程

路由器的两种工作模式

hash模式

histroy模式

最终代码案例

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

# Vue与SPA #

## 什么是SPA ##

### 简单了解SPA ###

SPA（Single Page Web Application）单页面网站应用，顾名思义，只有一个网页的网站。

最简单的SPA其实就是，把一个index.html放在网站服务器上，如下

![6f2a6c2cac3f458fa135278b469514c4.png][]

但是这种SPA网站应该不会有人光顾。因为太单调了，太简单了。

而实际上的企业级SPA网站，是要能够基本替代MPA网站，并超越MPA的网站的。

### 什么是MPA ###

MPA（Multiple Page Web Application）多页面网站应用，顾名思义，由多个网页构成的网站。

目前网络上能访问到的大部分网站都是MPA的。

MPA网站的最大特点就是，从一个网页跳转到另一个网页。

MPA网站的网页间跳转，其实本质是变更浏览器地址栏的URL，促使浏览器刷新网页，来发起HTTP GET请求，到服务器获取到最新的网页资源，这将导致两个问题：

*  消耗大量服务器性能：首先MPA是多页面网站，而浏览器每次只能展示一个页面，所以MPA意味着浏览器会向服务器多次请求不同页面资源。其次，浏览器可能会重复刷新某个页面，导致服务器收到重复页面资源的请求（PS：虽然服务器可以在响应中设置缓存头，促使浏览器缓存请求到的页面资源，防止无意义的重复的页面资源的请求，但是这并不意味着服务器不需要处理重复的页面资源请求，因为当浏览器意识到请求的页面资源已经在自身缓存中时，浏览器还是需要发送请求到服务器验证缓存的页面资源是否过期，如果过期，则服务器需要重新响应页面资源，如果未过期，则需要响应状态码304，告知浏览器可以继续使用缓存的页面资源）
 *  消耗大量浏览器性能：每次网页间跳转，都会导致网页刷新，而网页刷新本质是从服务器请求到新的网页资源，或者从自身缓存中获取网页资源，然后浏览器需要重新渲染整个网页。（网页的渲染是一个极其复杂的流程，首先是构建DOM树，然后是构建CSSOM树，然后将DOM树和CSSOM树结合形成渲染树，然后....反正就是很复杂，所以渲染整个网页是非常消耗浏览器性能的，特别是大量重复无意义的网页刷新行为）

MPA网站还有一些其他的小问题，比如跳转的网页可能会在新页签中打开，这不仅会占用大量浏览器资源，而且会给用户一种混乱的感觉，再比如，每次网页跳转的默认刷新行为都是需要时间的，这段时间会去请求服务器，重新渲染网页等，浪费用户的时间，还有网页刷新会造成网页内容的抖动。

所以MPA的弊端还是挺严重的，但是目前WEB网站，还是MPA模式居多，这是为啥呢？

因为MPA网站开发简单，或者说我们前端开发更熟悉多页面的开发模式。

### SPA相较于MPA的优点 ###

那么SPA要如何取代MPA，解决MPA的诸多问题呢？

首先我们来谈谈SPA的优点

*  SPA只有一个页面，当我们在浏览器初次加载SPA网站时，就已经完成了SPA所有（唯一）页面的加载，所以相较于MPA而言，对于服务器的综合性能消耗更小。
 *  SPA只有一个页面，所以不存在从一个网页跳转到另一个网页，SPA的都是网页内的内容切换。即SPA用单页面中内容切换，代替了，MPA多页面间跳转。而SPA单页面中的内容切换，其实就是网页的局部DOM更新。这将降低浏览器的渲染压力。

因为SPA不存在多页面间跳转，只存在单页面中内容切换（局部DOM更新），所以不会导致网页刷新，也就不会发生到服务器请求网页资源的行为，所以SPA内容切换的耗时（请求服务器+渲染）将远远小于MPA网页间跳转的耗时。并且由于没有网页刷新发生，所以也不存在网页抖动。

### 实现SPA的几个关键点 ###

看来SPA无论对于服务器，还是浏览器来说都是友好的嘛！

那么最最最关键的东西来了，SPA如何实现呢？

其实SPA的实现，就是几个关键点的实现：

*  理解SPA的单页面架构（导航区+展示区）
 *  前端路由的实现（浏览器地址栏URL的改变会引起展示区局部DOM的更新）

### 理解SPA单页面架构 ###

我们可以将SPA单页面划分出两个基础区域：导航区、展示区。

比如下图中，我们点击导航区的“用户中心”超链接，就会导致展示区的内容改变（局部DOM更新）为用户中心的内容。

![23583fff21be400c80ed7dc4bb621aed.png][]

如果是MPA的话，我们点击导航区“用户中心”，则用户中心的内容会以一个独立网页的形式呈现，而不是被更新当前网页的局部。

### 什么是前端路由 ###

什么是路由？

在前端中，路由其实就是：输入在浏览器地址栏的URL 与 浏览器窗口呈现的内容（网页或HTML片段）的对应关系。

什么是前端路由，什么是后端路由？

当我们在浏览器地址栏输入URL后，导致网页刷新，促使浏览器发送HTTP GET请求到后端服务器获取对应网页资源。即URL对应的网页来自于后端服务器。此时路由称为后端路由。

当我们在浏览器地址栏输入URL后，不会导致网页刷新，而是触发了浏览器原生的事件，导致对应事件回调会将准备好的HTML片段更新到网页指定位置。即URL对应的HTML片段来自前端自身。此时路由称为前端路由。（PS：SPA网站虽然只有一个网页，但是同时会存在多个HTML片段，这些HTML片段是作为SPA单页面展示区的内容的，一般来说这些HTML片段会和URL组成路由保存在js文件中，然后SPA单页面再引入该js文件即可。）

### 锚链接与URL中的hash值 ###

那么输入什么样的URL，才不会导致网页刷新呢？

之前我们学习a标签时，知道a标签的href支持传入一个锚链接，所谓锚链接就是一个\#id，点击超链接就可以将网页首部定位到对应id的标签上。

<!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Document</title>
      <style>
        ul {position:fixed;}
        a {color: white;}
        
        div {height: 950px;}
        #box1 {background-color: skyblue;}
        #box2 {background-color: seagreen;}
        #box3 {background-color: pink;}
      </style>
    </head>
    <body>
      <ul>
        <li><a href="#box1">box1-skyblue</a></li>
        <li><a href="#box2">box2-seagreen</a></li>
        <li><a href="#box3">box3-pink</a></li>
      </ul>
    
      <div id="box1"></div>
      <div id="box2"></div>
      <div id="box3"></div>
    </body>
    </html>

![20c69ed228e547649f793dc21ec1088e.gif][]

通过上面例子我们可以发现， 当我们点击锚链接时，不仅网页首部定位到对应id的标签上，而且浏览器的地址栏的URL也发生了变化，比如

初始时，浏览器地址栏的URL为

http://127.0.0.1:5500/index.html

当我们点击锚链接\#box2后，浏览器地址栏的URL为

http://127.0.0.1:5500/index.html#box2

并且，地址栏URL改变了，并没有导致网页刷新。

⭐这是因为URL中\#以后的部分（包含\#）是URL的hash值，单纯变更URL的hash值，浏览器是不会刷新网页的。这是浏览器内置的一个特性。

⭐另外，如果我们强制刷新对应带有hash的URL的网页，浏览器虽然会发送HTTP GET请求到服务器，但是请求URL中不会携带hash值，即服务器不会收到URL的hash值。

![04174ed3a0074aa58477b17bb6821f03.gif][]

⭐我们可以通过window.location对象获取到当前地址栏URL的hash值

![26885c802bea44cab145f7c43d277fbe.png][]

### 通过hashchange事件实现前端路由 ###

浏览器有一个原生内置事件hashchange，如果当前网页的URL的hash值改变，则会触发hashchange事件，此时我们就可以实现前端路由了

<!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Document</title>
    </head>
    <body>
      <ul>
        <li><a href="#/home">主页</a></li>
        <li><a href="#/about">关于</a></li>
      </ul>
    
      <div id="router-view"></div>
    
      <script>
        // 定义路由
        const routes = [
          {
            hash: '',
            html: '<h1>这是DEFAULT内容</h1>'
          },
          {
            hash: '#/home',
            html: '<h1>这是HOME内容</h1>'
          },
          {
            hash: '#/about',
            html: '<h1>这是ABOUT内容</h1>'
          }
        ]
    
        window.addEventListener('load', ()=>{alert('页面刷新了')}) // 检测网页是否刷新
        window.addEventListener('DOMContentLoaded', onHashChange)
        window.addEventListener('hashchange', onHashChange)
    
        function onHashChange(){
          // 当URL的hash改变时，找打对应hash的HTML片段
          const {html} = routes.find(route => {
            return route.hash === location.hash
          })
    
          // 将对应HTML片段更新到router-view中
          const routerView = document.querySelector('#router-view')
          routerView.innerHTML = html
        }
      </script>
    </body>
    </html>

![4d25dd33a0cc4796b1ee97d389193020.gif][]

### 编程式导航 ###

目前我们已经根据hashchange事件简单实现了前端路由，但是还有一点美中不足的就是：我们当前只能依赖于a标签锚链接来改变URL中的hash，难道我们所有的导航都要用a标签写吗？

其实我们将a标签锚链接改变URL的hash的方式，叫做“声明式导航”。

除了声明式导航，还有“编程式导航”，编程式导航指的是通过编写代码来改变地址栏中的URL。

基于window.location.hash可读可写属性来实现URL hash的变更

![40c77da281c742fb85868fa91aea4e55.gif][]

可以发现，window.location.hash不仅可以（网页无刷新地）改变地址栏的URL的hash，还可以触发hashchange事件

基于window.history.pushState方法或者replaceState方法实现URL hash的变更

![ffc9ce08eac24adc9bd1680f3c718a94.gif][]

可以发现，window.history.pushState方法或者replaceState方法只能（网页无刷新地）改变地址栏的URL值，但是不能触发hashchange事件。

为什么window.history.pushState或replaceState不能触发hashchange事件呢？因为它们改变的是整个URL的值，而不是URL的hash值。

下面代码用编程式导航，代替了声明式导航，最终效果一致

<!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Document</title>
    </head>
    <body>
      <ul>
        
        
        <li><button onclick="location.hash = '#/home'">主页</button></li>
        <li><button onclick="changeURL('#/about')">关于</button></li>
      </ul>
    
      <div id="router-view"></div>
    
      <script>
        // 定义路由
        const routes = [
          {
            hash: '',
            html: '<h1>这是DEFAULT内容</h1>'
          },
          {
            hash: '#/home',
            html: '<h1>这是HOME内容</h1>'
          },
          {
            hash: '#/about',
            html: '<h1>这是ABOUT内容</h1>'
          }
        ]
    
        window.addEventListener('load', ()=>{alert('页面刷新了')}) // 检测网页是否刷新
        window.addEventListener('DOMContentLoaded', onHashChange)
        window.addEventListener('hashchange', onHashChange)
    
        function onHashChange(){
          // 当URL的hash改变时，找打对应hash的HTML片段
          const {html} = routes.find(route => {
            return route.hash === location.hash
          })
    
          // 将对应HTML片段更新到router-view中
          const routerView = document.querySelector('#router-view')
          routerView.innerHTML = html
        }
    
        function changeURL(hash){
          history.pushState(null, null, location.origin + hash) 
          // 由于window.history.pushState或replaceState无法变更URL的hash后无法触发hashchange事件
          // 而我们触发hashchange事件是为了执行其事件回调
          // 所以我们可以直接在pushState或replaceState修改完hash后，自己执行hashchange事件回调
          onHashChange()
        }
      </script>
    </body>
    </html>

![80688be7efb74dd5ace1ef1da0c36449.gif][]

### 浏览器历史记录&前进后退功能 ###

我们都知道浏览器有一个历史记录，每当我们在浏览器访问一个网页，该网页的URL就会被记录到浏览器的历史记录中。

那么仅变更了hash的URL会被放入历史记录吗？

![ebbcab3b63484b4fabfafff45395e65d.gif][]

通过实践，我们可以发现，无论是a标签锚链接，还是location.hash，还是history.pushState修改了URL的hash后，对应的URL都会被加入历史记录中。

浏览器的历史记录本质是一个栈结构，最早访问的网页的URL存储在栈底，最后访问的网页的URL存储在栈顶。

我们可以利用浏览器的前进、后退菜单键，来调出历史栈中的URL。

![62ff7cf6e11b44dbb7fa33c9fb9aed4e.gif][]

而URL入历史栈的方式有两种：

*  push模式：该模式URL正常压入栈顶
 *  replace模式：该模式URL会覆盖已存在的栈顶URL

而我们通过

*  a标签锚链接
 *  location.hash
 *  history.pushState

修改的URL，其实都是以push模式入历史栈。

而只有history.replaceState支持修改的URL以replace模式入历史栈

![ecaa27b50ae44803b019d36dead0ae16.png][]

![82b875ba73334f00a5926b9fee0474c2.gif][]

通过上面例子，我们可以发现历史记录中：hash为\#/home的URL 被 hash为\#/about的URL覆盖了

## Vue与SPA ##

### 通过Vue认识SPA单页面丰富内容的来源 ###

我们基于Vue脚手架打包后的项目，其实就是一个SPA项目，因为打包代码中只有一个index.html。

![4d85b1442eb84abeb71f3408ce529c93.png][]

我们来通过Vue创建的SPA项目来验证几个SPA的疑问：

> SPA网站虽然只有一个网页，但是有非常多的HTML代码片段，这些HTML代码片段一般保存在js文件中，然后被SPA单页面引入，被在适当时机插入到SPA单页面指定位置。

Vue项目打包后的index.html，原始内容非常简单，但是当被浏览器加载后，则会执行其引入的js文件：app.a0561165.js

![407e85eb91864a97b42374e9c2511b12.png][]

在Vue项目中，HTML代码片段是包含在组件模板中的，而组件模板最终都会变转化为虚拟DOM对象

![20eb1d7cc11b40de9defa25038cf1961.png][]

比如上面文件app.a0561165.js就是Vue项目打包后的一个js文件，在该文件中就能找到对应的虚拟DOM对象的痕迹。

而这里的虚拟DOM对象，最终会被转化为真实DOM对象，插入index.html的指定位置。

这就是SPA网站虽然只有一个网页，但是依旧可以展示大量内容的原因。

### 在Vue中实现前端路由 ###

App.vue

<template>
      <div>
        <ul>
          <li><a href="#/home">home</a></li>
          <li><a href="#/about">about</a></li>
        </ul>
        <component :is="componentId"></component>
      </div>
    </template>
    
    <script>
      import MyHome from '@/components/MyHome.vue'
      import MyAbout from '@/components/MyAbout.vue'
    
      export default {
        name: 'App',
        components: {MyHome, MyAbout},
        data(){
          return {
            componentId: null
          }
        },
        methods: {
          onHashChange(){
            switch(location.hash) {
              case '#/home': this.componentId = MyHome; break;
              case '#/about': this.componentId = MyAbout; break;
            }
          }
        },
        created(){
          window.addEventListener('DOMContentLoaded', this.onHashChange)
          window.addEventListener('hashchange', this.onHashChange)
        }
      }
    </script>

MyAbout.vue

<template>
      <h1>这是ABOUT内容</h1>
    </template>
    
    <script>
      export default {
        name: 'MyAbout'
      }
    </script>

MyHome.vue

<template>
      <h1>这是HOME内容</h1>
    </template>
    
    <script>
      export default {
        name: 'MyHome'
      }
    </script>

![cf38636c92074f5e86ee53b7cdec5909.gif][]

怎么说呢，虽然上面代码也可以在Vue项目中实现前端路由，但是非常地不规范，兼容性也很差，所以为了弥补Vue项目的前端路由能力，Vue官方推出了vue-router包。

# Vue Router #

## 安装和配置Vue Router ##

### 下载vue-router ###

Vue2.x的项目需要使用vue-router@3 版本的包，Vue3.x的项目需要使用vue-router@4 版本以上的包。

vue-router包需要被Vue项目在生产环境使用

![81966ec8bdf647da9ad0e246109eee37.png][]

### 引入vue-router到项目中 ###

![aeeef827339448ebab497ccd3c5abf96.png][]

vue-router对外暴露的VueRouter，不仅是一个构造函数，还是一个Vue插件

### 注册VueRouter插件 ###

![2bcbb91ff9a746feb09c3c53fabb3343.png][]

注册VueRouter插件，本质是调用其VueRouter构造函数对象的install方法

本次注册插件，会带来如下影响：

![33e3580dca214218b99cd22a20850e59.png][]

### 创建VueRouter实例并将其关联vm.$options.router ###

![45b3d49397514beab016ce14a493d18a.png][]

Vue构造函数入参配置对象，默认是不支持router属性，但是当我们Vue.use(VueRouter)后，Vue构造函数就被追加处理入参options.router属性的能力了。

### 路由模块 ###

由于Vue Router最终会处理所有的前端路由逻辑，所以安装和配置Vue Router的逻辑写在main.js中，会让main.js变得臃肿，所以Vue官方推荐我们将安装和配置Vue Router的代码写到路由模块 /src/router/index.js中

![294b1b4535634878aca233a98f59ba52.png][]

## 认识VueRouter ##

### 路由器和路由 ###

VueRouter是一个构造函数，它用于创建一个路由器实例。

路由器的第一个工作就是管理SPA前端路由。

在Vue项目中，前端路由指的是：URL中hash地址 与 组件 的对应关系。

> http://localhost:5500/index.html\#/home
> 
> 上面URL中：
> 
> \#/home 是 URL的 hash值
> 
> /home 是 URL的 hash地址

### routes配置属性 ###

VueRouter构造函数入参配置对象有一个routes配置属性，它是一个数组，数组元素就是被VueRouter实例管理的前端路由对象。

路由对象有两个基础属性path和component，分别标识 hash地址 和 组件

![bfb59918be794ae9a523ee61f31ad97b.png][]

### 路由器的第二个工作 ###

路由器除了管理路由外，还会时刻监听浏览器地址栏URL的hash地址的变化，一旦hash地址发生改变，则从自身管理的路由中，找到hash地址对应的component组件，并将其渲染到导致hash地址改变的组件中。

![98241b72256a44eabc9b5d013222b56c.png][]

此时有两个问题：

*  如何更改浏览器地址栏的URL的hash地址？
 *  路由组件应该被渲染到哪里？

### router-link ###

我们知道通过a标签的锚链接可以更改浏览器地址栏中的URL的hash地址，而VueRouter在内部对a标签进行了封装，推出了router-link组件。

router-link组件标签有一个to属性，该属性的值将在router-link标签被点击后，更新为浏览器地址栏URL新的hash地址。

![99b70018f5874c69bcd11640e9f2c923.png][]

![03ac6802f5d044af8ee6fe21f8bb2db8.gif][]

根据实践结果可以发现，router-link标签本质就是一个a标签，router-link的to属性 是对 a标签的href属性的封装。

router-link除了to属性外，还有一个active-class属性，该属性的作用是：为被点击激活的router-link标签添加指定样式（active-class属性值），且具有排他性。

![68765caf083e44b69cbb9ca27494ad68.gif][]

另外router-link组件还有一个tag属性，该属性默认值为'a'，表示router-link组件被编译后会变为一个a标签，我们可以自定义tag属性为任何HTML标签，这样最终router-link组件被渲染出来的就是我们指定的HTML标签

![ea52fa15c22942b69249b05ff5cf6944.png][]

router-link组件标签还有一个replace属性，该属性值默认为false，表示router-link标签修改的浏览器地址栏URL后，URL会被以push模式加入浏览器历史记录栈中，而如果设置replace属性为true，则表示URL会被以replace模式加入历史记录栈。

![db6d59c068cc4cad8874faa146f88289.gif][]

### router-view ###

router-view组件用于占位。

当A组件中router-link修改了浏览器地址栏的URL的hash地址后，路由器就会监听到最新的hash地址，并到自身管理路由中，根据hash地址找到对应的路由组件，最终将路由组件渲染到A组件中router-view占位的地方。

![f0a06812b9824576bcff486d87d91a43.png][]

![f93922a543724314bd0bb9c4c260ea83.png][]

## 认识路由组件 ##

### 什么是路由组件 ###

路由中与hash地址对应的组件，就是路由组件。

![6edde2bf225e424b87cf474746d7aaf3.png][]

路由组件与非路由组件最大的区别在于，路由组件不会直接当成组件标签使用，而是完全交给路由器管理。路由器会将路由组件渲染到指定的router-view组件标签占位的地方。

为了在开发过程中，有效区分路由组件和非路由组件，官方推荐将

*  路由组件 放在 /src/pages 文件夹下
 *  非路由组件 放在 /src/components 文件夹下

### 路由组件的创建和销毁时机 ###

路由组件被切入时创建，被切出时销毁。

![73412686ba93406c8069ae65701fdf74.png][]

![86ff67f2b3114a04a2b66b18d4eb4e5d.gif][]

### keep-alive组件 ###

keep-alive组件是Vue的内置组件，keep-alive组件可以缓存内容组件的实例，避免组件实例被销毁。

如果我们使用keep-alive组件包裹router-view，则相当于keep-alive组件包裹了路由组件，这样可以缓存路由组件的实例，避免其被切出后销毁。

![de36e03268ca435895143f45f425c33c.gif][]

但是keep-alive默认会缓存所有渲染进router-view的组件，比上面例子中，MyAbout和MyHome组件都会被缓存。

如果我们只想缓存一个指定的组件，则可以使用keep-alive组件标签的include属性的字符串写法 ![182f65428e3f43de9c8780a29040f22d.gif][]

需要注意，include中写的是组件定义时的name属性值。

![838423d6765e494b97dd94d4f2de70b7.png][]

如果我们想缓存多个组件的实例，则可以使用include的数组写法 ![8713ee22122e4d8caacb76db2f36af01.gif][]

keep-alive组件标签还有一个exclude属性，用法和inclue一致，功能相反。

### 两个新的生命周期钩子actived,deactived ###

由于keep-alive可以缓存其内容组件的实例，导致组件被卸载后，组件的实例不会销毁，而是进入一种失活状态，当组件被重新装载时，组件的实例不会创建，而是直接去激活keep-alive缓存的组件实例。

而keep-alive缓存的组件实例的失活时机，和激活时机，也被加入了钩子。

![71437eac1de94ca9b30badc089316199.gif][]

对于路由组件来说，当路由组件被切入时，其actived钩子调用，当路由组件被切出时，其deactived钩子调用。

### 路由组件实例上的$route属性 ###

当我们Vue.use(VueRouter)后，Vue.prototype上就会被挂载一个$route属性，则所有组件实例上就都有了一个$route属性，该属性是一个Object对象，用于收集组件的路由信息。

![8490ff57ad194b2fb9e4f6de99288d53.png][]

### 路由组件上的$router属性 ###

当我们Vue.use(VueRouter)后，Vue.prototype上就会被挂载一个$router属性，则所有组件实例上就都有了一个$router属性，并且所有组件实例的$router都指向了同一个VueRouter实例对象，那就是我们传递给vm.$options.router的路由器对象。路由器对象上主要包含了各种导航方法，用于编程式导航。

![a1ce8789217d432384b75d99eeda89f3.png][]

## 嵌套路由 ##

### 什么是嵌套路由 ###

嵌套路由，即子路由

*  子路由的hash地址必然以父路由的hash地址为前缀，如父路由hash地址是/home，子路由hash地址为/home/message
 *  子路由组件必然要在父路由组件中展示，表现为组件嵌套。

比如下面例子中，

当在App组件中router-link到/home时，App组件中router-view中展示就是Home组件。

当在Home组件中router-link到/home/news时，Home组件中router-view展示的就是News组件。

![2f0d4d26198f4163aa67f3b0a854d27c.png][]

### 嵌套路由的实现 ###

1、子路由配置属性children

VueRouter构造函数入参配置对象的属性：routes数组的元素，就是一级路由。

路由对象都有一个children属性，该属性也是一个数组，用于配置子级路由，例如一级路由对象的children属性中配置的就是二级路由；二级路由对象的children属性中配置的就是三级路由；

![0399d3ade76a49e88cb25cd554c5b34c.png][]

需要注意的是children中路由对象的path是不需要加 / 前缀的，如上，path: 'news'，中news并不需要加/前缀，VueRouter内部会为我们自动添加。

2、子路由组件的渲染

由于子路由组件，必须要定义在父路由的组件中，比如/home/news就是/home的子路由，所以MyNews组件必然要定义到MyHome组件中，而路由组件都是交给路由器管理的，所以我们只需要在MyHome组件中router-link to /home/news，让路由器找/home/news对应的子组件，然后渲染到router-view中即可

![fcf19722f57444d0af78d39f612adc3d.png][]

![88cf7d72be2b45a3bcef519c9d4d2ddc.gif][]

### 路由重定向 redirect属性 ###

在上面例子中，我们发现了一个问题：

![d1d10f08531a45399ad645171d491caa.png][]

![0968578e168f4564b2ba021ecb4d20f4.png][]

当hash地址为/home时，其实等价于/home/，即此时子路由为 ''

而/home的子路由中并没有配置 path: ‘’ 的路由，所以没有对应的子组件被渲染，导致MyHome组件的展示区空白。

![4d7bc9cd0b6149b19b028365d4c60866.png][]

此时，我们可以设置，当路由地址为 /home 时，让其重定向到 /home/news，保证MyHome组件的展示区始终有内容展示。

![c80add97840a4c1d9a2a004707fc944f.gif][]

### 默认子路由 ###

通过路由重定向，我们可以让 /home 和 /home/news 的展示结果一致。

而 /home 又等价于 /home/，所以路由重定向的作用是，让 /home/ 和 /home/news 路由对应同一个路由组件。

相当于：

![fa01b99ae9c04452884a6ef87a7d7aa1.png][]

所以此时，/home/news路由就没有存在必要了，可以简化为

![9f24f58c16ef47c3845f0ca316871dad.png][]

我们将子路由中 path: '' 的路由，称为默认子路由。

## 动态路由 ##

### 什么是动态路由 ###

在Vue Router中，每一个路由hash地址都要对应一个组件，但是存在一种情况，就是hash地址中存在动态的路径参数

*  /about/001
 *  /about/002
 *  /about/003

那么此时我们是否需要定义三个组件去分别展示001,002,003呢?如下

![23859bcad6644c15933a2dd13d24218e.png][]

虽然可行，但是这种路由定义是有弊端的，如果有001~100的about详情，我们是否要定义100个路由组件呢？

所以Vue Router支持动态路由hash地址。

所谓动态路由hash地址，即将路由hash地址中动态的路径参数用 :参数名 代替，此时动态路由hash地址就可以匹配到 所有复合要求的路由hash了。

![699e3cb0e2c44328803b8be363ff39b2.png][]

![69e54c0571d54b49bbcb89889bc29673.png][]

### $route.params ###

此时我们已经将多个路由hash，对应到了一个路由组件中。

如：/about/001、/about/002、/about/003 都对应路由组件MyDetail。

那么路由组件应该如何获取 动态路由hash地址中动态路径参数呢？

此时我们需要借助 组件实例上的$route属性，该属性是一个对象，包含当前路由组件的所有路由相关信息

![2aecce8610eb405db108addb0ca71d1d.png][]

我们可以通过 动态路径参数 会挂载为当前路由组件实例身上$route.params对象的属性。

我们需要注意$route.params对象的属性的名字取决于 定义的动态路径参数名字。

![ee69e6f731444c76a24f47234fa64f9d.png][]

### 将$route.params转为组件props ###

当前我们需要通过 $route.params.xxx 获取路径参数，形式比较繁琐。所以Vue Router支持将$route.params.xxx 转为 组件的props属性。而组件的props中属性都将挂载为组件实例的直接属性。

为啥可以将$route.params.xxx 当成 props属性 使用呢？

我们其实可以将 父路由组件中 router-link to 导航到 子路由组件的过程，看成是父路由组件给子路由组件传参的过程

![11e89e72399b43f38fea07d983becfe1.png][]

而to的hash地址中的路径参数，其实就是父路由组件，传递给子路由组件的参数值。

所以这种父子组件传参，子组件通过props配置属性接收，在理论上是合情合理的。

实现props获取动态路由路径参数，我们需要走两步

1、在动态路由中开启props支持，即设置props:true

![7062df30e8114df185eddece8916fd65.png][]

2、在动态路由对应的路由组件中，使用props配置属性接收路径参数

![aed4117d51c9419fa39a1758ca7086eb.png][]

### 路由配置属性props的三种用法 ###

前面已经介绍路由配置属性props的第一种用法，即设置路由对象的props属性为true，这样对应路由组件上的$route.params.xxx就会被交给路由组件的props，简化了我们在路由组件中获取动态路由路径参数的形式。

路由配置属性props还有另外两种用法：

*  对象式
 *  函数式

我们可以利用路由配置属性props对象 传递一些固定数据给路由组件

![44845d87a7e24e37b8a427056c555d20.png][]

路由配置属性props还可以写成函数，此时props函数可以接收一个默认入参 $route，该入参就是当前路由组件实例的$route属性![27ebfa4407f841c4ab07cc8b6d0a1a55.png][]

## 查询参数路由 ##

### 什么是查询参数路由 ###

即 路由hash地址中带有查询参数，比如 /home/news?id=001

hash地址中的查询参数不会对hash地址造成影响，即 /home/news 和 /home/news?id=001 都会匹配到 /home下的子路由news。

### $route.query ###

其实带有查询参数的路由，也可以看作是一种 父路由组件 向 子路由组件 传参的方式。

在子路由组件中，我们可以通过 组件实例上的$route.query属性获取到查询参数

![04ec817dbd0a439fa79a1376044c6c1c.png][]

### 通过路由配置属性props简化$route.query的获取 ###

目前在路由中查询参数的获取，要通过 $route.query.xxx ，形式非常繁琐，此时我们可以通过路由配置属性props来简化其获取形式

我们知道 路由配置属性props 支持三种模式：布尔式、对象式、函数式

其中props函数可以接收到对于路由组件实例的$route属性作为入参，所以

![4cb11b5019f04301b03ea462181616c0.png][]

## 命名路由 ##

### 什么是命名路由 ###

简单说，就是给路由配置对象增加一个name属性，即给路由定义一个别名。

如下面例子，给/home/news定义了一个别名xinwen

![8e637d62ea3f401c9fcd830467097ee6.png][]

### 为什么需要命名路由 ###

随着嵌套的路由越来越多，router-link的to属性指向的hash地址也就越来越长，这将使得router-link的to属性的书写非常繁琐。

所以 Vue Router 支持给路由定义别名，让router-link的to属性指向路由的别名 来替代 冗长的hash地址。

![79df53606120435797aa71332a7a4829.png][]

命名路由需要结合router-link组件标签的to属性的对象式写法使用。

### router-link to属性的对象式写法 ###

router-link to属性的值是一个hash地址，而目前hash地址包括三个部分：

*  路由静态路径，如/home
 *  动态路径参数，如/home/about/001
 *  查询参数，/home/news?id=001

目前，我们都是将这三个部分通过字符串拼接的方式定义在一起的，可读性很差。

所以to属性支持对象式写法，将这三部分作为to对象的属性

![084d621aa70b42a2907c6e9c071444a9.png][]![976e63ee98214fe28300b1b2c1d53f5c.png][]

需要注意的是，如果router-link to的是动态路由，则to对象式写法只能导航到 路由别名，而不能导航到 路由hash地址。因为Vue Router不会将to对象中的path和params组合后进行路由查找，而是直接查找path对应的路由

![175e8b91626a464b89391abe457496fe.png][]

而to对象使用name查找路由的话，则会考虑进params

![1524e7d9a4dc4bc484da41bc89b916ef.png][]

## 命名router-view ##

### 路由配置属性component**s**的对象式写法 ###

router-view的作用是占位，当router-link改变了地址栏hash地址后，路由器就会将对应hash地址的路由组件component渲染到router-view中。

![80570f07326c4da4abb5e76cf0dad80b.png][]

但是一个router-view只能渲染一个路由组件，即使我们将router-view定义多次，也只是将一个路由组件渲染多次而已。

所以，为了能够在提供多种路由组件给router-view，可以使用路由配置属性components

![247b9aa912684b29b125acef8e408f6d.png][]

### 命名router-view ###

路由器根据hash地址找到了对应路由配置对象的components属性，然后路由器会将：

*  components.default对应的组件 渲染到 未命名的router-view中
 *  components.xxx对应的组件 渲染到 命名为xxx的router-view中

![100e2d30123240ecb535c574257d688f.png][]

## 编程式导航 ##

### 什么是导航 ###

Vue Router中导航的意思就是改变浏览器地址栏的URL的hash地址，来促使内容切换。

### 声明式导航 ###

*  router-link组件的to属性可以改变浏览器地址栏的URL的hash地址
 *  a标签的href属性可以改变浏览器地址栏的URL的hash地址

上面这种通过标签点击改变hash地址的方式，称为声明式导航

### 编程式导航 ###

使用代码来改变浏览器地址栏的URL的hash地址 的方式就是编程式导航。

之前介绍SPA路由时，我们尝试了：

*  location.hash
 *  history.pushState，history.replaceState

来改变hash地址，这些方式就是编程式导航。

而Vue Router对这些方式进行了更加完整的封装，并定义为了 路由器实例 router的方法

*  router.push（hash | routeObj，onComplete, onAbort）
 *  router.replace（hash | routeObj，onComplete, onAbort）
 *  router.go(n)

编程式导航相较于声明式导航的自由度更高，可以进行异步导航。

### router.push ###

router.push有三个入参

*  hash | routeObj：hash即hash地址，routeObj即相当于router-link to的对象
 *  onComplete：可选，成功回调
 *  onAbort：可选，中止回调

![fa65007654fb4d34825ed441acb04c89.png][]

### router.replace ###

router.replace与router.push用法相同，只是在URL存入历史记录栈的方式不同。

router.push是将URL压入栈顶

router.replace是先将栈顶URL出栈，再将replace的URL压入栈顶，表现为替换掉栈顶URL。

### router.go ###

router.go只有一个入参，入参是一个数值。

该方法是模拟浏览器的前进、后退菜单键功能。

入参正数值，表示前进n个，入参负数值，表示后退n个。

![1e798063c2804ec18859e1b3105a60ee.png][]

![6d9c70cafc764807a2bcfcab65c321f3.gif][]

## 导航守卫 ##

### 什么是导航守卫 ###

所谓导航守卫，就是导航拦截。

即，当你访问某hash地址对应的路由组件时，路由器会先拦截你的访问，然后校验你的权限信息，如果权限合法，则放开拦截，让你访问对应路由组件，否则就保持拦截。

### 为什么需要导航守卫 ###

可能大家一听到权限校验相关的东西，下意识决定应该是后端的事情，但是实际企业开发中，基本上所有的校验都要求前后端保持一致。

如果前端未加校验，只在后端加校验，则虽然有后端兜底，不会发生安全问题，但是前端给用户的体验会变差，让用户怀疑网站的安全性。

如果前端加了校验，后端没加校验，则黑客可以绕过前端的校验，直接与后端对话，造成安全问题。

说白了，前端校验就是个样子工程，不做虽然不会导致大问题，但是面子过不去。

所以，前端是需要导航守卫的，虽然是个面子工程。

### 导航守卫的分类 ###

*  全局导航守卫：前置、后置
 *  路由独享守卫
 *  组件内的守卫：路由进入前，路由离开后

### 全局导航前置守卫 ###

全局导航前置守卫，就是路由器实例的一个方法beforeEach，该方法接收一个回调函数作为入参。

当导航触发时，beforeEach的参数回调函数就会被调用，底层会依次传入

*  to：到哪个路由去
 *  from：从哪个路由来
 *  next：放行函数

作为beforeEach的参数回调函数的入参。

下面例子，定义了一个全局导航前置守卫

![218eec8cce9a48248d70688b792bb87b.png][]

全局导航前置守卫的回调函数执行时机是：

1、项目首次加载时，此时相当于hash地址从 / 到 /

![73affeeea9b2474cad200470a58c3c5b.png][]

2、hash地址发生改变时，如下例中，hash地址从 / 变为 /home/news

![48c08512a0f6473590dbf810fd37e5dc.png][]

### 关于next函数的四种调用方式 ###

next函数是放行函数，它有四种调用方式：

*  next()：放行到目的路由
 *  next(hash)：放行到指定hash地址对应的路由
 *  next(false)：不放行，阻止路由跳转，保持在本路由
 *  next(err)：err是一个Error对象，此时next执行会触发router.onError的参数回调函数

router.beforeEach((to, from, next) => {
      const token = JSON.parse(localStorage.getItem('token'))
      let permission = 0; // 未登录
    
      if (token) {
        const { name, pass } = token
        if (name == 'qfc' && pass == '123456') {
          permission = 2 // 已登录，最高权限
        } else {
          permission = 1 // 已登录，普通权限
        }
      }
    
      if (to.path === '/login' || permission === 2) {
        return next()
      }
    
      if (permission === 0) {
        alert('未登录，请先登录')
        return next('/login')
      }
    
      if (permission === 1 && to.path.startsWith('/about')) {
        alert('权限不足，访问被中止')
        return next(false)
      }
    
      next()
    })

![15cf86aee3e9413096647160a280b609.gif][]

上面例子分别演示了next放行函数的三种常用用法。

我们需要注意的是，导航守卫中next方法能且只能严格调用一次。

*  如果导航守卫中next方法被一次也没被调用，则导航流程阻塞
 *  如果导航守卫中next方法被调用了多次，理论上只有最后一次有效

### 全局导航后置守卫 ###

全局导航后置守卫，就是路由器实例的一个方法afterEach，该方法接收一个回调函数作为入参。

当导航结束时，afterEach的参数回调函数就会被调用，底层会依次传入

*  to：目的路由对象
 *  from：源路由对象

作为afterEach的参数回调函数的入参

和beforeEach参数回调函数入参不同的是，afterEach的参数回调函数没有next函数，这表明了afterEach并不会起到拦截作用。

afterEach参数回调的调用时机是：

*  当路由切换成功时，afterEach参数回调被调用。
 *  当路由切换失败或者被阻止，则afterEach参数回调不会被调用。

![db842c0a585f45d6a219b6f8efc33b9a.png][]

![88d5181d29a040f590d74cadd3193f10.gif][]

通过上面例子，我们可以发现，

*  只要触发导航，则beforeEach的参数回调就会调用，无论导航最终成功还是中止
 *  而afterEach的参数回调只有在导航成功完成时，才会被调用

afterEach的作用是，当导航到目标路由后，做一些beforeEach中不好做的统一收尾工作。

比如我们想要变更document.title为当前路由的对应的信息，如果我们在beforeEach中处理的话

![f099ea73f7a74e41b866f51855e802f4.png][]

可以发现在beforeEach中需要在每次next调用前进行document.title的设置，即需要设置多次，并且要考虑路由跳转中止的话，不能使用to.path作为document.title，只能使用from.path作为document.title。

而在afterEach中，只需要设置一次，且由于afterEach的参数回调只有在路由跳转成功后才会调用，所以可以仅使用to.path作为document.title。

![7a96931aa65d457eb38ee9083e356295.png][]

### 路由元信息属性 meta ###

前面在实现路由校验时，除了要校验用户登录状态，还要校验用户是否有访问对应路由的权限。而当前，我们只能在router.beforeEach中判断各种路由path是否需要权限，此时router.beforeEach中的逻辑非常难看，且后期不容易维护

![a8eb8842f872496f8099b8a64bc3daf0.png][]

此时我们可以在路由对象中为路由设置元信息，来标记该路由是否需要权限校验

![ce99a103c7614ffe92f6f1c4cba8a17d.png][]

然后在router.beforeEach参数回调中就不需要维护固定path的权限校验了，而是改为统一权限校验

![79161f4abf654eeb932cc22caec3f411.png][] ![bd80279ff0d640c2b293461b6e0492ea.gif][]

### 路由独享守卫 ###

路由独享守卫 只作用于 当前路由，即当导航到当前路由时，会触发当前路由的独享守卫。

我们可以在路由配置对象中，定义路由独享守卫属性beforeEnter，它是一个函数，底层依次传入

*  to
 *  from
 *  next

三个入参给beforeEnter。

beforeEnter的调用时机为：当导航到beforeEnter所在路由时，就会触发beforeEnter的执行。

![19c7444e0eed4690bba9985c22448da6.png][]

我们可以发现beforeEnter入参的to，永远都是自己所在的路由。

路由独享守卫，可以做一些路由私有的权限校验。

而如果一个路由，既被路由独享守卫作用，也被全局导航守卫作用，则各守卫执行顺序如下

![467157e9706a40d289377ba052f4408a.png][]

![0f2f1f8137614e048655eda1dc47ea8d.png][]

可以发现，执行顺序是：全局导航前置守卫 => 路由独享守卫 => 全局导航后置守卫

### 组件内守卫 ###

组件内路由守卫有三个

*  beforeRouteEnter（to, from, next）
 *  beforeRouteUpdate（to, from, next）
 *  beforeRouteLeave（to, from, next）

而组件内路由守卫，既可以当成导航守卫使用，也可以当成路由组件特有的生命周期钩子使用。

需要注意的是，这三个钩子函数，只有路由组件才有，非路由组件没有。

其实一个组件既可以用作路由组件，也可以用作非路由组件。如下例中，MyLogin既当成了非路由组件使用，又当成了路由组件使用。

![3378ae4cdcf34f9499f4c832e5ad5989.png][]

*  作为非路由组件的MyLogin来说，它无法触发上面三个钩子。
 *  作为路由组件的MyLogin来说，它可以触发上面三个钩子。

其根本原因是，当路由组件是由路由器管理渲染的，而路由器在渲染路由组件的过程中，会调用上面三个钩子。

而非路由组件不是由路由器管理渲染的，所以即使非路由组件定义了上面三个钩子，也没有路由器去调用。

总结，只有组件被路由器渲染时，才会触发组件的beforeRouteEnter、beforeRouteUpdate、beforeRouteLeave三个钩子。

beforeRouteEnter是在路由组件被渲染之前，即被创建之前调用的，因此此时beforeRouteEnter中是无法访问到组件实例this的。

![10821b5c86ab4565bc01ba8383d4013b.png][]

beforeRouteUpdate 是在路由组件更新时触发的，这里的更新特指：动态路由之间切换时，比如/about/001到/about/002

![cd0a52da798c4c35b87303fdcd17642c.png][]

并且，此时beforeRouteUpdate 中可以访问到组件实例。

beforeRouteLeave是在路由组件被卸载之前调用的，即从当前路由 导航到 其他路由前调用

![4bb711b7f03348f78ffe49c233e6ff9f.png][]

需要注意的是，beforeRouteLeave会在全局导航前置守卫前执行。

beforeRouteLeave可以用来提示用户输入未保存，阻止其跳转到其他路由.

![b1f498d4bb06486288d1e80933fc77e0.png][]

### 完整的导航解析流程 ###

当一个导航触发后，必然是从一个路由from 跳转到 另一个路由to;

如果from、to都是同一个动态路由，则

1.  beforeEach触发
2.  to路由的beforeRouteUpdate触发
3.  afterEach触发

![2a48846fcc354bf28ff3f344ed6b9bf5.png][]

如果from、to有一个不是动态路由，则

1.  from路由的beforeRouteLeave触发
2.  beforeEach触发
3.  to路由的beforeEnter触发
4.  to路由的beforeRouteEnter触发
5.  afterEach触发

![bc8ea92e2c4f4b4faf99adca6322fa6f.png][]

## 路由器的两种工作模式 ##

### hash模式 ###

VueRouter的默认工作模式就是hash模式。

而hash工作模式，指的是：路由器通过监听浏览器地址栏中URL的hash地址的变化，来实现前端路由。

此模式的特点是，浏览器地址栏中URL中必定有一个\#，如

![1a49649cee0d43938eb639d3e97a32cb.png][]

不适合有强迫症的人群。但是此时模式兼容性好。

并且URL中的hash地址仅用于前端路由，不会发送给后端服务器。

### histroy模式 ###

所谓history模式，即路由器监听的是浏览器地址栏URL的变化，此时URL不需要携带\#。

比如 localhost:8080/about

我们可以在定义路由器实例的VueRouter入参配置对象中增加一个属性：mode: 'history'

来开启路由器的history工作模式。

![f98ff42d7dab486ea38edfcc0a3a5a3b.png][]

![bbcedac289934206bbc090a62283e4bb.gif][]

注意观察上面例子中，浏览器地址栏的变化，可以发现此时地址栏URL不再带有\#。

这种工作模式的优点是：提升了强迫症患者的视觉感受

但是history模式的缺点却十分致命：

*  兼容性不好，一些老版本的浏览器不支持history模式
 *  history模式下的网页刷新可能会导致发送未知的请求到服务器，如果服务器未做特殊处理的话，则SPA应用将发生错误。

对于第二种缺点，我们可以将Vue项目打包后部署到一个服务器上

![09324edf9480403db3313f24d282ee12.png][]

如上图，我们利用node+express创建一个静态资源托管的服务器，并将SPA项目部署到了服务器静态资源目录，之后启动了服务器。

![22161de2875846689ee99dcb6f940d44.gif][]

可以发现，如果我们按照SPA单页面中定义好的导航进行跳转，则没有任何问题。但是当我们刷新网页时，或者通过浏览器地址栏访问某SPA路由时，SPA应用就出错了。

原因很简单，由于是history模式，所以此时前端路由的URL，和后端路由的URL没有任何区别，当我们刷新网页时，或者通过浏览器地址访问某SPA路由时，会触发两种行为：

*  前端路由：路由器监听到URL的变化，开始准备对应组件渲染到展示区
 *  后端路由：浏览器监听到地址栏URL的变化，开始发送HTTP GET请求到服务器获取对应资源

其中后端路由会失败，因为虽然此时地址栏URL本质还是前端路由，在服务器上并没有对应路由的接口。

比如：localhost/home/news?id=001

当我们刷新网页时，浏览器就会发送一个HTTP GET请求到服务器获取对应资源

![ec74039534654f03a94ce0b33add32ca.png][]

此时的解决方案是，让服务器定制对应的前端路由URL对应的接口，然后响应200给前端，让前端不会报错即可。

而express有一个第三方中间件[connect-history-api-fallback - npm (npmjs.com)][connect-history-api-fallback - npm _npmjs.com]

就可以帮助后端express服务器自动处理这些前端路由URL。

![67fc3379ae354c79ba494a09d692ed9f.png][]

![dccabb755a5140e2918a68cafd56c127.gif][]

# 最终代码案例 #

[GitHub - qwx427219/Vue\_SPA\_Router![icon-default.png?t=M5H6][icon-default.png_t_M5H6]https://github.com/qwx427219/Vue\_SPA\_Router.git][GitHub - qwx427219_Vue_SPA_Router_icon-default.png_t_M5H6_icon-default.png_t_M5H6_https_github.com_qwx427219_Vue_SPA_Router.git]

[6f2a6c2cac3f458fa135278b469514c4.png]: https://img-blog.csdnimg.cn/6f2a6c2cac3f458fa135278b469514c4.png
[23583fff21be400c80ed7dc4bb621aed.png]: https://img-blog.csdnimg.cn/23583fff21be400c80ed7dc4bb621aed.png
[20c69ed228e547649f793dc21ec1088e.gif]: https://img-blog.csdnimg.cn/20c69ed228e547649f793dc21ec1088e.gif
[04174ed3a0074aa58477b17bb6821f03.gif]: https://img-blog.csdnimg.cn/04174ed3a0074aa58477b17bb6821f03.gif
[26885c802bea44cab145f7c43d277fbe.png]: https://img-blog.csdnimg.cn/26885c802bea44cab145f7c43d277fbe.png
[4d25dd33a0cc4796b1ee97d389193020.gif]: https://img-blog.csdnimg.cn/4d25dd33a0cc4796b1ee97d389193020.gif
[40c77da281c742fb85868fa91aea4e55.gif]: https://img-blog.csdnimg.cn/40c77da281c742fb85868fa91aea4e55.gif
[ffc9ce08eac24adc9bd1680f3c718a94.gif]: https://img-blog.csdnimg.cn/ffc9ce08eac24adc9bd1680f3c718a94.gif
[80688be7efb74dd5ace1ef1da0c36449.gif]: https://img-blog.csdnimg.cn/80688be7efb74dd5ace1ef1da0c36449.gif
[ebbcab3b63484b4fabfafff45395e65d.gif]: https://img-blog.csdnimg.cn/ebbcab3b63484b4fabfafff45395e65d.gif
[62ff7cf6e11b44dbb7fa33c9fb9aed4e.gif]: https://img-blog.csdnimg.cn/62ff7cf6e11b44dbb7fa33c9fb9aed4e.gif
[ecaa27b50ae44803b019d36dead0ae16.png]: https://img-blog.csdnimg.cn/ecaa27b50ae44803b019d36dead0ae16.png
[82b875ba73334f00a5926b9fee0474c2.gif]: https://img-blog.csdnimg.cn/82b875ba73334f00a5926b9fee0474c2.gif
[4d85b1442eb84abeb71f3408ce529c93.png]: https://img-blog.csdnimg.cn/4d85b1442eb84abeb71f3408ce529c93.png
[407e85eb91864a97b42374e9c2511b12.png]: https://img-blog.csdnimg.cn/407e85eb91864a97b42374e9c2511b12.png
[20eb1d7cc11b40de9defa25038cf1961.png]: https://img-blog.csdnimg.cn/20eb1d7cc11b40de9defa25038cf1961.png
[cf38636c92074f5e86ee53b7cdec5909.gif]: https://img-blog.csdnimg.cn/cf38636c92074f5e86ee53b7cdec5909.gif
[81966ec8bdf647da9ad0e246109eee37.png]: https://img-blog.csdnimg.cn/81966ec8bdf647da9ad0e246109eee37.png
[aeeef827339448ebab497ccd3c5abf96.png]: https://img-blog.csdnimg.cn/aeeef827339448ebab497ccd3c5abf96.png
[2bcbb91ff9a746feb09c3c53fabb3343.png]: https://img-blog.csdnimg.cn/2bcbb91ff9a746feb09c3c53fabb3343.png
[33e3580dca214218b99cd22a20850e59.png]: https://img-blog.csdnimg.cn/33e3580dca214218b99cd22a20850e59.png
[45b3d49397514beab016ce14a493d18a.png]: https://img-blog.csdnimg.cn/45b3d49397514beab016ce14a493d18a.png
[294b1b4535634878aca233a98f59ba52.png]: https://img-blog.csdnimg.cn/294b1b4535634878aca233a98f59ba52.png
[bfb59918be794ae9a523ee61f31ad97b.png]: https://img-blog.csdnimg.cn/bfb59918be794ae9a523ee61f31ad97b.png
[98241b72256a44eabc9b5d013222b56c.png]: https://img-blog.csdnimg.cn/98241b72256a44eabc9b5d013222b56c.png
[99b70018f5874c69bcd11640e9f2c923.png]: https://img-blog.csdnimg.cn/99b70018f5874c69bcd11640e9f2c923.png
[03ac6802f5d044af8ee6fe21f8bb2db8.gif]: https://img-blog.csdnimg.cn/03ac6802f5d044af8ee6fe21f8bb2db8.gif
[68765caf083e44b69cbb9ca27494ad68.gif]: https://img-blog.csdnimg.cn/68765caf083e44b69cbb9ca27494ad68.gif
[ea52fa15c22942b69249b05ff5cf6944.png]: https://img-blog.csdnimg.cn/ea52fa15c22942b69249b05ff5cf6944.png
[db6d59c068cc4cad8874faa146f88289.gif]: https://img-blog.csdnimg.cn/db6d59c068cc4cad8874faa146f88289.gif
[f0a06812b9824576bcff486d87d91a43.png]: https://img-blog.csdnimg.cn/f0a06812b9824576bcff486d87d91a43.png
[f93922a543724314bd0bb9c4c260ea83.png]: https://img-blog.csdnimg.cn/f93922a543724314bd0bb9c4c260ea83.png
[6edde2bf225e424b87cf474746d7aaf3.png]: https://img-blog.csdnimg.cn/6edde2bf225e424b87cf474746d7aaf3.png
[73412686ba93406c8069ae65701fdf74.png]: https://img-blog.csdnimg.cn/73412686ba93406c8069ae65701fdf74.png
[86ff67f2b3114a04a2b66b18d4eb4e5d.gif]: https://img-blog.csdnimg.cn/86ff67f2b3114a04a2b66b18d4eb4e5d.gif
[de36e03268ca435895143f45f425c33c.gif]: https://img-blog.csdnimg.cn/de36e03268ca435895143f45f425c33c.gif
[182f65428e3f43de9c8780a29040f22d.gif]: https://img-blog.csdnimg.cn/182f65428e3f43de9c8780a29040f22d.gif
[838423d6765e494b97dd94d4f2de70b7.png]: https://img-blog.csdnimg.cn/838423d6765e494b97dd94d4f2de70b7.png
[8713ee22122e4d8caacb76db2f36af01.gif]: https://img-blog.csdnimg.cn/8713ee22122e4d8caacb76db2f36af01.gif
[71437eac1de94ca9b30badc089316199.gif]: https://img-blog.csdnimg.cn/71437eac1de94ca9b30badc089316199.gif
[8490ff57ad194b2fb9e4f6de99288d53.png]: https://img-blog.csdnimg.cn/8490ff57ad194b2fb9e4f6de99288d53.png
[a1ce8789217d432384b75d99eeda89f3.png]: https://img-blog.csdnimg.cn/a1ce8789217d432384b75d99eeda89f3.png
[2f0d4d26198f4163aa67f3b0a854d27c.png]: https://img-blog.csdnimg.cn/2f0d4d26198f4163aa67f3b0a854d27c.png
[0399d3ade76a49e88cb25cd554c5b34c.png]: https://img-blog.csdnimg.cn/0399d3ade76a49e88cb25cd554c5b34c.png
[fcf19722f57444d0af78d39f612adc3d.png]: https://img-blog.csdnimg.cn/fcf19722f57444d0af78d39f612adc3d.png
[88cf7d72be2b45a3bcef519c9d4d2ddc.gif]: https://img-blog.csdnimg.cn/88cf7d72be2b45a3bcef519c9d4d2ddc.gif
[d1d10f08531a45399ad645171d491caa.png]: https://img-blog.csdnimg.cn/d1d10f08531a45399ad645171d491caa.png
[0968578e168f4564b2ba021ecb4d20f4.png]: https://img-blog.csdnimg.cn/0968578e168f4564b2ba021ecb4d20f4.png
[4d7bc9cd0b6149b19b028365d4c60866.png]: https://img-blog.csdnimg.cn/4d7bc9cd0b6149b19b028365d4c60866.png
[c80add97840a4c1d9a2a004707fc944f.gif]: https://img-blog.csdnimg.cn/c80add97840a4c1d9a2a004707fc944f.gif
[fa01b99ae9c04452884a6ef87a7d7aa1.png]: https://img-blog.csdnimg.cn/fa01b99ae9c04452884a6ef87a7d7aa1.png
[9f24f58c16ef47c3845f0ca316871dad.png]: https://img-blog.csdnimg.cn/9f24f58c16ef47c3845f0ca316871dad.png
[23859bcad6644c15933a2dd13d24218e.png]: https://img-blog.csdnimg.cn/23859bcad6644c15933a2dd13d24218e.png
[699e3cb0e2c44328803b8be363ff39b2.png]: https://img-blog.csdnimg.cn/699e3cb0e2c44328803b8be363ff39b2.png
[69e54c0571d54b49bbcb89889bc29673.png]: https://img-blog.csdnimg.cn/69e54c0571d54b49bbcb89889bc29673.png
[2aecce8610eb405db108addb0ca71d1d.png]: https://img-blog.csdnimg.cn/2aecce8610eb405db108addb0ca71d1d.png
[ee69e6f731444c76a24f47234fa64f9d.png]: https://img-blog.csdnimg.cn/ee69e6f731444c76a24f47234fa64f9d.png
[11e89e72399b43f38fea07d983becfe1.png]: https://img-blog.csdnimg.cn/11e89e72399b43f38fea07d983becfe1.png
[7062df30e8114df185eddece8916fd65.png]: https://img-blog.csdnimg.cn/7062df30e8114df185eddece8916fd65.png
[aed4117d51c9419fa39a1758ca7086eb.png]: https://img-blog.csdnimg.cn/aed4117d51c9419fa39a1758ca7086eb.png
[44845d87a7e24e37b8a427056c555d20.png]: https://img-blog.csdnimg.cn/44845d87a7e24e37b8a427056c555d20.png
[27ebfa4407f841c4ab07cc8b6d0a1a55.png]: https://img-blog.csdnimg.cn/27ebfa4407f841c4ab07cc8b6d0a1a55.png
[04ec817dbd0a439fa79a1376044c6c1c.png]: https://img-blog.csdnimg.cn/04ec817dbd0a439fa79a1376044c6c1c.png
[4cb11b5019f04301b03ea462181616c0.png]: https://img-blog.csdnimg.cn/4cb11b5019f04301b03ea462181616c0.png
[8e637d62ea3f401c9fcd830467097ee6.png]: https://img-blog.csdnimg.cn/8e637d62ea3f401c9fcd830467097ee6.png
[79df53606120435797aa71332a7a4829.png]: https://img-blog.csdnimg.cn/79df53606120435797aa71332a7a4829.png
[084d621aa70b42a2907c6e9c071444a9.png]: https://img-blog.csdnimg.cn/084d621aa70b42a2907c6e9c071444a9.png
[976e63ee98214fe28300b1b2c1d53f5c.png]: https://img-blog.csdnimg.cn/976e63ee98214fe28300b1b2c1d53f5c.png
[175e8b91626a464b89391abe457496fe.png]: https://img-blog.csdnimg.cn/175e8b91626a464b89391abe457496fe.png
[1524e7d9a4dc4bc484da41bc89b916ef.png]: https://img-blog.csdnimg.cn/1524e7d9a4dc4bc484da41bc89b916ef.png
[80570f07326c4da4abb5e76cf0dad80b.png]: https://img-blog.csdnimg.cn/80570f07326c4da4abb5e76cf0dad80b.png
[247b9aa912684b29b125acef8e408f6d.png]: https://img-blog.csdnimg.cn/247b9aa912684b29b125acef8e408f6d.png
[100e2d30123240ecb535c574257d688f.png]: https://img-blog.csdnimg.cn/100e2d30123240ecb535c574257d688f.png
[fa65007654fb4d34825ed441acb04c89.png]: https://img-blog.csdnimg.cn/fa65007654fb4d34825ed441acb04c89.png
[1e798063c2804ec18859e1b3105a60ee.png]: https://img-blog.csdnimg.cn/1e798063c2804ec18859e1b3105a60ee.png
[6d9c70cafc764807a2bcfcab65c321f3.gif]: https://img-blog.csdnimg.cn/6d9c70cafc764807a2bcfcab65c321f3.gif
[218eec8cce9a48248d70688b792bb87b.png]: https://img-blog.csdnimg.cn/218eec8cce9a48248d70688b792bb87b.png
[73affeeea9b2474cad200470a58c3c5b.png]: https://img-blog.csdnimg.cn/73affeeea9b2474cad200470a58c3c5b.png
[48c08512a0f6473590dbf810fd37e5dc.png]: https://img-blog.csdnimg.cn/48c08512a0f6473590dbf810fd37e5dc.png
[15cf86aee3e9413096647160a280b609.gif]: https://img-blog.csdnimg.cn/15cf86aee3e9413096647160a280b609.gif
[db842c0a585f45d6a219b6f8efc33b9a.png]: https://img-blog.csdnimg.cn/db842c0a585f45d6a219b6f8efc33b9a.png
[88d5181d29a040f590d74cadd3193f10.gif]: https://img-blog.csdnimg.cn/88d5181d29a040f590d74cadd3193f10.gif
[f099ea73f7a74e41b866f51855e802f4.png]: https://img-blog.csdnimg.cn/f099ea73f7a74e41b866f51855e802f4.png
[7a96931aa65d457eb38ee9083e356295.png]: https://img-blog.csdnimg.cn/7a96931aa65d457eb38ee9083e356295.png
[a8eb8842f872496f8099b8a64bc3daf0.png]: https://img-blog.csdnimg.cn/a8eb8842f872496f8099b8a64bc3daf0.png
[ce99a103c7614ffe92f6f1c4cba8a17d.png]: https://img-blog.csdnimg.cn/ce99a103c7614ffe92f6f1c4cba8a17d.png
[79161f4abf654eeb932cc22caec3f411.png]: https://img-blog.csdnimg.cn/79161f4abf654eeb932cc22caec3f411.png
[bd80279ff0d640c2b293461b6e0492ea.gif]: https://img-blog.csdnimg.cn/bd80279ff0d640c2b293461b6e0492ea.gif
[19c7444e0eed4690bba9985c22448da6.png]: https://img-blog.csdnimg.cn/19c7444e0eed4690bba9985c22448da6.png
[467157e9706a40d289377ba052f4408a.png]: https://img-blog.csdnimg.cn/467157e9706a40d289377ba052f4408a.png
[0f2f1f8137614e048655eda1dc47ea8d.png]: https://img-blog.csdnimg.cn/0f2f1f8137614e048655eda1dc47ea8d.png
[3378ae4cdcf34f9499f4c832e5ad5989.png]: https://img-blog.csdnimg.cn/3378ae4cdcf34f9499f4c832e5ad5989.png
[10821b5c86ab4565bc01ba8383d4013b.png]: https://img-blog.csdnimg.cn/10821b5c86ab4565bc01ba8383d4013b.png
[cd0a52da798c4c35b87303fdcd17642c.png]: https://img-blog.csdnimg.cn/cd0a52da798c4c35b87303fdcd17642c.png
[4bb711b7f03348f78ffe49c233e6ff9f.png]: https://img-blog.csdnimg.cn/4bb711b7f03348f78ffe49c233e6ff9f.png
[b1f498d4bb06486288d1e80933fc77e0.png]: https://img-blog.csdnimg.cn/b1f498d4bb06486288d1e80933fc77e0.png
[2a48846fcc354bf28ff3f344ed6b9bf5.png]: https://img-blog.csdnimg.cn/2a48846fcc354bf28ff3f344ed6b9bf5.png
[bc8ea92e2c4f4b4faf99adca6322fa6f.png]: https://img-blog.csdnimg.cn/bc8ea92e2c4f4b4faf99adca6322fa6f.png
[1a49649cee0d43938eb639d3e97a32cb.png]: https://img-blog.csdnimg.cn/1a49649cee0d43938eb639d3e97a32cb.png
[f98ff42d7dab486ea38edfcc0a3a5a3b.png]: https://img-blog.csdnimg.cn/f98ff42d7dab486ea38edfcc0a3a5a3b.png
[bbcedac289934206bbc090a62283e4bb.gif]: https://img-blog.csdnimg.cn/bbcedac289934206bbc090a62283e4bb.gif
[09324edf9480403db3313f24d282ee12.png]: https://img-blog.csdnimg.cn/09324edf9480403db3313f24d282ee12.png
[22161de2875846689ee99dcb6f940d44.gif]: https://img-blog.csdnimg.cn/22161de2875846689ee99dcb6f940d44.gif
[ec74039534654f03a94ce0b33add32ca.png]: https://img-blog.csdnimg.cn/ec74039534654f03a94ce0b33add32ca.png
[connect-history-api-fallback - npm _npmjs.com]: https://www.npmjs.com/package/connect-history-api-fallback
[67fc3379ae354c79ba494a09d692ed9f.png]: https://img-blog.csdnimg.cn/67fc3379ae354c79ba494a09d692ed9f.png
[dccabb755a5140e2918a68cafd56c127.gif]: https://img-blog.csdnimg.cn/dccabb755a5140e2918a68cafd56c127.gif
[icon-default.png_t_M5H6]: https://csdnimg.cn/release/blog_editor_html/release2.1.4/ckeditor/plugins/CsdnLink/icons/icon-default.png?t=M5H6
[GitHub - qwx427219_Vue_SPA_Router_icon-default.png_t_M5H6_icon-default.png_t_M5H6_https_github.com_qwx427219_Vue_SPA_Router.git]: https://github.com/qwx427219/Vue_SPA_Router.git