【Vue】vue-router 路由进阶

浅浅的花香味﹌ 2023-02-20 06:17 102阅读 0赞

### 目录 ###

*   *   *  1. 概念
         *   *  1.1 前端渲染和后端渲染
             *   *  1.1.1 后端渲染
                 *  1.1.2 前端渲染
             *  1.2 前端路由和后端路由
             *   *  1.2.1 前端路由
                 *  1.2.2 后端路由
                 *  1.2.3 前后端路由对比
             *  1.3 vue-router
         *  2. 路由的规则
         *   *  2.1 路由的 history 模式
             *  2.2 路由的 hash 模式
             *  2.3 两种模式的区别
         *  3. router-link
         *  4. 路由的基本使用
         *  5. 路由重定向与别名
         *  6. 动态路由的使用
         *  7. 路由懒加载
         *  8. 路由的嵌套使用
         *  9.路由传递参数
         *  10. 路由导航守卫
         *  11. keep-alive

首先来看一下整个vue-router的体系：  
![在这里插入图片描述][20200625231851514.png]

### 1. 概念 ###

#### 1.1 前端渲染和后端渲染 ####

##### 1.1.1 后端渲染 #####

后端渲染指的是，前端发起请求，后端用后台模板引擎直接生成html发送给前端，前端接受到数据之后，直接插入页面。

**渲染流程如下：**

1.  请求一个HTML
2.  服务端请求数据(内网请求快)
3.  服务器初始渲染(服务端性能，较快）
4.  服务端返回已经有正确内容的HTML
5.  客户端请求JS/CSS文件
6.  等待JS文件下载完成
7.  等待JS加载并初始化完成
8.  客户端把剩下一部分渲染完成(内容小，渲染快)

**优点：**

*  前端耗时少，因为后端拼接完了HTML，不需要先下载一堆JS和CSS 后才能看到页面，浏览器只需要直接渲染出来
 *  搜索引擎优化，因为在后端有完整的HTML页面，所以爬虫更容易爬取获得信息，更有利于SEO
 *  无需占用客户端资源。即解析模板的工作完全交由后端来做，客户端只要解析标准的HTML页面即可，这样对于客户端的资源占用更少，尤其是移动端，也可以更省电
 *  后端生成静态化文件。即生成缓存片段，这样就可以减少数据库查询浪费的时间了，且对于数据变化不大的页面非常高效

**缺点：**

*  不利于前后端分离，开发效率低。使用服务器端渲染，则无法进行分工合作，则对于前端复杂度高的项目，不利于项目高效开发
 *  服务器端渲染，则前端一般就是写一个静态HTML文件，然后后端再修改为模板，这样是非常低效的，并且还常常需要前后端共同完成修改的动作  
    如果后端改了模板，前端还需要根据改动的模板再调节CSS，这样使得前后端联调的时间增加
 *  占用服务器端资源，即服务器端完成HTML模板的解析，如果请求较多，会对服务器造成一定的访问压力。而如果使用前端渲染，就是把这些解析的压力分摊了前端，而这里确实完全交给了一个服务器

##### 1.1.2 前端渲染 #####

前端渲染指的是后端不提供完整的HTML页面，而是提供一些API使得前端可以获取到JSON数据，然后前端拿到JSON数据之后再在前端进行HTML页面的拼接，然后展示在浏览器上。

**渲染流程如下：**

1.  请求一个HTML
2.  服务端返回一个HTML
3.  浏览器下载html里面的JS/CSS文件
4.  等待JS文件下载完成
5.  等待JS加载并初始化完成
6.  JS代码终于可以运行，由JS代码向后端请求数据(ajax/fetch)
7.  等待后端数据返回
8.  客户端从无到完整地，把数据渲染为响应页面

**优点：**

*  前后端分离，前端专注于前端UI，后端专注于API开发，且前端有更多的选择性，而不需要遵循后端特定的模板
 *  体验更好，比如，我们将网站做成单页Web应用（single page web application，SPA，是加载单个HTML 页面并在用户与应用程序交互时动态更新该页面的Web应用程序）或者部分内容做成SPA，这样，尤其是移动端，可以使体验更接近于原生APP
 *  局部刷新，无需每次都进行完整页面请求
 *  懒加载，如在页面初始时只加载可视区域内的数据，滚动后再加载其它数据，可以通过 vue-lazyload 实现
 *  富交互，使用 JS 实现各种酷炫效果
 *  节约服务器成本，省电省钱，JS 支持 CDN 部署，且部署极其简单，只需要服务器支持静态文件即可

**缺点：**

*  前端响应较慢，如果是客户端渲染，前端还要进行拼接字符串的过程，需要耗费额外的时间，不如服务器端渲染速度快
 *  不利于SEO，目前比如百度、谷歌的爬虫对于SPA都是不认的，只是记录了一个页面，所以SEO很差

#### 1.2 前端路由和后端路由 ####

##### 1.2.1 前端路由 #####

**定义：** 在单页面应用，大部分页面结构不变，只改变部分内容的使用

**优点：** 用户体验好，不需要每次都从服务器全部获取，快速展现给用户

**缺点：** 使用浏览器的前进，后退键的时候会重新发送请求，没有合理地利用缓存。单页面无法记住之前滚动的位置，无法在前进，后退的时候记住滚动的位置

##### 1.2.2 后端路由 #####

**定义：** 通过用户请求的url导航到具体的html页面；每跳转到不同的URL，都是重新访问服务端，然后服务端返回页面，页面也可以是服务端获取数据，然后和模板组合，返回HTML，也可以是直接返回模板HTML，然后由前端js再去请求数据，使用前端模板和数据进行组合，生成想要的HTML

##### 1.2.3 前后端路由对比 #####

*  从性能和用户体验的层面来比较的话，后端路由每次访问一个新页面的时候都要向服务器发送请求，然后服务器再响应请求，这个过程肯定会有延迟。而前端路由在访问一个新页面的时候仅仅是变换了一下路径而已，没有了网络延迟，对于用户体验来说会有相当大的提升。
 *  在某些场合中，用ajax请求，可以让页面无刷新，页面变了但Url没有变化，用户就不能复制到想要的地址，用前端路由做单页面网页就很好的解决了这个问题。但是前端路由使用浏览器的前进，后退键的时候会重新发送请求，没有合理地利用缓存。

#### 1.3 vue-router ####

**概念：** Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌。包含的功能有：

*  嵌套的路由/视图表
 *  模块化的、基于组件的路由配置
 *  路由参数、查询、通配符
 *  基于 Vue.js 过渡系统的视图过渡效果
 *  细粒度的导航控制
 *  带有自动激活的 CSS class 的链接
 *  HTML5 历史模式或 hash 模式，在 IE9 中自动降级
 *  自定义的滚动条行为

**主要作用**：通过管理URL来**实现URL与组件的对应**和**通过URL进行组件之间的切换**。

### 2. 路由的规则 ###

vue-router有两种模式：**history模式** 和 **hash模式**

#### 2.1 路由的 history 模式 ####

注意：vue-router默认使用hash模式，如果想要使用`history`模式，需要在`router/index.js`中设置一个`mode`属性：

let router = new VueRouter({ 
      mode: 'history',
      routes:[]
    })

history模式是利用HTML5 History Interface中新增的`pushState()`和`replaceState()`方法。它们分别可以添加和修改历史记录条目。这些方法通常与`window.onpopstate` 配合使用。

（1）`window.history.pushState(state,title,url)`

*  state：需要保存的数据，这个数据在触发popstate事件时，可以在event.state里获取
 *  title：标题，基本没用，一般传null
 *  url：设定新的历史纪录的url。新的url与当前url的origin必须是一样的，否则会抛出错误。url可以时绝对路径，也可以是相对路径。

示例：

// 当前URl
    https://www.baidu.com/a/
    // 执行以下方法
    history.pushState(null, null, './qq/')
    // 执行后
    https://www.baidu.com/a/qq/

（2）`window.history.replaceState(state,title,url)`

该方法与pushState 基本相同，但它是修改当前历史纪录，而 `pushState()` 是创建新的历史纪录

示例：

// 当前URl
    https://www.baidu.com/a/
    // 执行以下方法
    history.pushState(null, null, './qq/')
    // 执行后
    https://www.baidu.com/qq/

这两个方法用于浏览器的历史记录栈，在当前已有的 `back`、`forward`、`go` 的基础之上，提供了对历史记录修改的功能。当他们进行修改时，虽然改变了URL，但是不会立即向后端发送请求。

需要注意的是，history模式需要后台的配置，如果没有进行配置，就会返回`404`。

#### 2.2 路由的 hash 模式 ####

使用 URL 的 hash 来模拟一个完整的 URL，于是当 URL 改变时，页面不会重新加载。hash模式的原理就是利用了window的`onhashchange()`事件。

`onhashchange` 事件在当前 URL 的锚部分(以 ‘\#’ 号为开始) 发生改变时触发 。

锚部分的实例：指定当前 URL 为 `http://www.example.com/test.htm#part2` ，这个 URL 中的锚部分为 `#part2`。

可以使用以下方式调用事件:

*  通过设置Location 对象 的 location.hash 或 location.href 属性修改锚部分。
 *  使用不同书签导航到当前页面（使用"后退" 或"前进"按钮）
 *  点击链接跳转到书签锚

hash模式的特点就是hash出现在URL中，但是不会被包含在HTTP请求中，不发起请求，就不会重新加载页面。

当hash值发生变化时，就会被浏览器记录下来，浏览器就可以实现前进和后退的功能。尽管没有请求服务器，但是它将URL和页面的状态关联了起来，被人们称之为前端路由，他也是vue-router中默认的模式。

#### 2.3 两种模式的区别 ####

调用 `history.pushState()` 相比于直接修改 `hash`，存在以下优势:

*  pushState() 设置的新 URL 可以是与当前 URL 同源的任意 URL；而 hash 只可修改 \# 后面的部分，因此只能设置与当前 URL 同文档的 URL；
 *  pushState() 设置的新 URL 可以与当前 URL 一模一样，这样也会把记录添加到栈中；而 hash 设置的新值必须与原来不一样才会触发动作将记录添加到栈中；
 *  pushState() 通过 stateObject 参数可以添加任意类型的数据到记录中；而 hash 只可添加短字符串；
 *  pushState() 可额外设置 title 属性供后续使用。

hash模式也有他的优势：

*  hash 模式下，仅 hash 符号之前的内容会被包含在请求中，如 http://www.abc.com，因此对于后端来说，即使没有做到对路由的全覆盖，也不会返回 404 错误。
 *  history 模式下，前端的 URL 必须和实际向后端发起请求的 URL 一致，如 http://www.abc.com/book/id， 如果后端缺少对 /book/id 的路由处理，将返回 404 错误。

### 3. router-link ###

**（1）概述**  
`<router-link>` 组件支持用户在具有路由功能的应用中 (点击) 导航。 通过 `to` 属性指定目标地址，默认渲染成带有正确链接的 `<a>` 标签，可以通过配置 `tag` 属性生成别的标签。另外，当目标路由成功激活时，链接元素自动设置一个表示激活的 CSS 类名。

`<router-link>` 比起写死的 `<a href="...">` 会好一些，理由如下：

*  无论是 HTML5 history 模式还是 hash 模式，它的表现行为一致，所以，当你要切换路由模式，或者在 IE9 降级使用 hash 模式，无须作任何变动。
 *  在 HTML5 history 模式下，router-link 会守卫点击事件，让浏览器不再重新加载页面。
 *  当你在 HTML5 history 模式下使用 base 选项之后，所有的 to 属性都不需要写 (基路径) 了。

**（2）to**

to表示目标路由的链接。当被点击后，内部会立刻把 to 的值传到 router.push()，所以这个值可以是一个字符串或者是描述目标位置的对象。

`to`有以下几种写法：

// 字符串，结果为：<a href="home">Home</a>
    <router-link to="home">Home</router-link>
    // 直接跳转目标链接
    <router-link to="/home">Home</router-link>
    // 动态绑定目标连接
    <router-link :to="index">Home</router-link>
    // 以对象的形式跳转
    <router-link :to="{path: '/home'}">Home</router-link>
    // 命名路由
    <router-link :to="{ name: 'Home'}">Home</router-link>
    // 带查询参数，结果为： /register?plan=private
    <router-link :to="{ path: 'register', query: { plan: 'private' }}">Home</router-link>

**（3） replace**

设置 `replace` 属性的话，当点击时，会调用 `router.replace()` 而不是 `router.push()`，于是导航后不会留下 history 记录。

<router-link :to="{ path: '/home'}" replace></router-link>

注意，replace的值为布尔值

**（4） tag**

通过配置 `tag` 属性生成别的标签，vue-router会自动监听点击事件：

<router-link to="/home" tag="div"></router-link>

如果想要几部分内容都放在链接里面，可以这样写：

<router-link to="/home" tag="li">
       <li> 
           <i></i>
           <span>123</span>
       </li>
    </router-link>

**（5）active-class**

点击链接激活之后，激活链接的标签上出现一个`router-link-active`的类名，可以使用它来设置需要的样式。也可以自己设置一个类名进行样式的设置。

如果想要一个全局的样式，就要在`router/index.js`文件中设置一个`linkActiveClass`属性，其属性值是class的名字，使用这个class定义样式即可：

let router = new VueRouter({ 
      inkActiveClass: 'is-active',
      routes:[]
    })

还有一种设置样式方式（仅限于给某个链接添加）：

<router-link to="/home" active-class="is-active"></router-link>

**（6） append**  
设置 append 属性后，则在当前 (相对) 路径前添加基路径。例如，我们从 `/a` 导航到一个相对路径 b，如果没有配置 append，则路径为 `/b`，如果配了，则为 `/a/b`

<router-link :to="{ path: 'relative/path'}" append></router-link>

**（7） event**  
如果我们在其他事件时进行链接的跳转，而不是点击的时候，可以修改event属性，该属性默认值为click

<router-link :to="{ path: '/home'}" event="hover"></router-link>

属性值可以是事件名称，也可以动态绑定事件。

### 4. 路由的基本使用 ###

vue-router安装：

npm install vue-router --save

在模块化工程中使用它：

*  导入路由对象，并调用Vue.use(VueRouter)

因为vue-router是一个插件，所以可以通过`Vue.use()`来安装路由功能。

import Vue from 'vue'
    import VueRouter from 'vue-router'
    Vue.use(VueRouter)

*  创建路由实例，并传入路由映射配置（组件和路径映射关系）

const routes = [
        { 
          path: '/',
          name: 'HelloWorld',
          component: HelloWorld
        }
      ]
    
    const router = new VueRouter ({ 
       routes
    })
    
    export default router

*  在Vue实例中挂载创建的路由实例

import router from './router'
    
    new Vue({ 
       el: '#app',
       router,
       render: h => h(app)
    })

*  使用路由：`<router-link></router-link>`

`<router-link>`标签会根据当前的路径，动态渲染出不同的组件。

在路由切换时，切换的是`<router-view>`挂载的组件，其他内容不会发生改变。

### 5. 路由重定向与别名 ###

路由重定向是指：用户在访问A页面时，强制用户跳转到地址B，从而展示特定的组建页面。  
通过路由规则的`redirect`属性，指定一个新的路由地址就可以设置路由的重定向。

let router = new VueRouter({ 
            routes: [
              {  path: '/', redirect：'/user' },  
              {  path: '/user', name: 'User', component: User },
              {  path: '/register', name: 'RegisterUser',component: Register }
            ]
        })

除了上面的写法之外还可以这么写：

// 对象形式
    {  path: '/', redirect：{  path: '/user' } },  
    // 名称形式
    {  path: '/', redirect：{  name: 'User' } },
    // 动态设置
    {   path: '/', 
       // to是目标路由对象，也就是访问的路径的路由信息
       redirect：(to) => { 
         // 根据目标路由对象做一些判断，在不同条件下返回不同的路径
         if(to.path === '/123'){ 
           return '/home' 
         }else if(to.path === '/456'){ 
           return { path: '/document'}
         }else{ 
           return { name: 'About'}       
       } 
    },

我们还可以给路由设置别名，当访问别名的路径时，就会跳到对应的地址，但是不会激活原来的链接。使用`alias`属性设置别名：

{  path: '/user', name: 'User', component: User, alias: '/index' },

### 6. 动态路由的使用 ###

有时候我们需要根据不同的情况来渲染出不同的URL，这时我们可以使用动态路由。

来看下面的例子，我们根据不同的用户来渲染不同的路由组件，可以这样设置：

const routes = [
        { 
          path: '/user/:userId',
          name: 'User',
          component: User
        }
      ]

使用（需要动态绑定）：

<router-link :to="'/user/' + userId"></router-link>

如果想要在页面使用URL中的用户ID，使用`$route`获得路由中的参数：

userId: { 
          return this.$route.params.userId
        }

### 7. 路由懒加载 ###

我们先来看一下项目打包之后的目录结构：  
![在这里插入图片描述][20200626194452911.png]

其中js文件中：

*  以app开头的文件是我们写的业务逻辑的代码
 *  以vendor开头的文件是第三方依赖的代码
 *  以manifest开头的文件是用来为打包的代码做底层支撑的

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

路由懒加载的形式：

*  第一种，在ES6中，我们可以有更加简单的写法来组织Vue异步组件和Webpack的代码分割（这也是官方推荐的写法）

// import Login from '../components/Login.vue'
    const Login = () => import('../components/Login.vue')
    // import Home from '../components/Home.vue'
    const Home = () => import('../components/Home.vue')
    // import Welcome from '../components/Welcome.vue'
    const Welcome = () => import('../components/Welcome.vue')
    
    
    
    const routes = [
        { 
          path: '/login',
          component: Login
        },
        { 
          path: '/home',
          component: Home
        },
        { 
          path: '/welcome',
          component: Welcome
        }
      ]

*  第二种：AMD写法

这样写，模块就不用import去引入了

const routes = [
             { 
                path: '/home',
                component: (resolve) => { 
                   require(['../components/Home'], resolve) 
                }
            }
     ]

*  第三种：结合Vue的异步组件和Webpack 的代码分析：

const Home = resolve => { 
      require.ensure(['../components/Home'], () => { 
         resolve(require('../components/Home'))
      })
    }
    
    const routes = [
            { 
                path: '/home',
                component: Home
            }
     ]

这样打包出来的文件就会根据不同的路由分为不同的js文件，等到我们需要用到的时候才会从服务器中发送过来。

### 8. 路由的嵌套使用 ###

如果我们想要创建类似`/home/news`的路由，需要使用到路由的嵌套。

实现路由嵌套的步骤如下：

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

const routes = [
        { 
          path: '/home',
          component: Home,
          children: [
             { 
                path: 'news',
                component: News
             }
          ]
        }
      ]

然后在`Home`组件中添加`<router-view>`标签。

### 9.路由传递参数 ###

上面也写到了动态路由的参数，它就是通过路由传递参数实现的。路由传递参数的方式有两种：`params`和`query`

（1） `params` 方式

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

（2） `query`方式

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

<router-link :to{ path: '/user', query: {  id: abc}></router-link>

在使用了vue-router的应用中，路由被注册到每个组件中，赋值为`this.$route`，并且当路由进行切换时，路由对象会被更新。我们可以通过`$route`对象来获取参数：

this.$route.query.id     // abc
    this.$route.params.id    // abc

**`$route`和`$router`的区别？**

*  `this.$router` 表示VueRouter的实例（全局对象），所有页面都可以调用其 `push()`，`go()`等方法
 *  `this.$route` 表示当前正在用于跳转的路由器对象，可以调用其`name`、`path`、`query`、`params`等属性

### 10. 路由导航守卫 ###

**全局前置守卫**

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

使用 `router.beforeEach` 注册一个全局前置守卫：

const router = new VueRouter({  ... })
    
    router.beforeEach((to, from, next) => { 
      // ...
    })

当一个导航触发时，全局前置守卫按照创建顺序调用。守卫是异步解析执行，此时导航在所有守卫 `resolve` 完之前一直处于 等待中。

来看一下三个参数的含义：

*  `to: Route`: 即将要进入的目标路由对象
 *  `from: Route`: 当前导航正要离开的路由
 *  `next: Function`: 一定要调用该方法来 resolve 这个钩子。执行效果依赖 next 方法的调用参数。

我们有一个需求，就是每次切换一个页面，上面标签的title要改成对应正确的title。这个需求我们就可以使用路由导航守卫来实现：

router.beforeEach((to, from, next) => { 
      document.title = to.matched[0].meta.title
      next()
    })

之前在练习的时候，也使用到了路由导航守卫，对访问的路径进行判断，如果没有登录就跳转到登录界面：

// 为路由对象添加beforeEach导航守卫
    router.beforeEach((to, from, next) => { 
      // 如果现在是登录页面，直接放行
      if (to.path === '/login') return next()
      // 从sessionStorage中获取token值
      const tokenStr = window.sessionStorage.getItem('token')
      // 如果没有找到token，强制跳转到登录页面
      if (!tokenStr) return next('login')
      next()
    })

**全局后置钩子**

路由跳转之后的钩子：

router.afterEach((to, from) => { 
      // ...
    })

**路由独享守卫**

上面所说的都是全局的守卫，这里说一下路由独享的守卫，形式如下：

const router = new VueRouter({ 
      routes: [
        { 
          path: '/home',
          component: Home,
          beforeEnter: (to, from, next) => { 
            // ...
          }
        }
      ]
    })

**组件内部路由**

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

const Foo = { 
      template: `...`,
      beforeRouteEnter (to, from, next) { 
        // 在渲染该组件的对应路由被 confirm 前调用
        // 不！能！获取组件实例 `this`
        // 因为当守卫执行前，组件实例还没被创建
      },
      beforeRouteUpdate (to, from, next) { 
        // 在当前路由改变，但是该组件被复用时调用
        // 举例来说，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候，
        // 由于会渲染同样的 Foo 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
        // 可以访问组件实例 `this`
      },
      beforeRouteLeave (to, from, next) { 
        // 导航离开该组件的对应路由时调用
        // 可以访问组件实例 `this`
      }
    }

注意：`beforeRouteEnter` 守卫 不能 访问 this，因为守卫在导航确认前被调用，因此即将登场的新组件还没被创建。

**完整的导航解析流程：**

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

### 11. keep-alive ###

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

`router-view`也是一个组件，如果直接将`router-view`包含在`keep-alive`中，所有路径匹配到的视图组件都会被缓存：

<keep-alive>
      <router-view></router-view>
    </keep-alive>

这样在一个组件在来回切换之后，状态就不会重新加载了

`keep-alive`有两个比较重要的属性：

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

例如：

<keep-alive exclude="login">
      <router-view></router-view>
    </keep-alive>

在每个组件中，都有一个name属性，这里匹配的就是它的name，表示`Login`组件不使用`keep-alive`。

[20200625231851514.png]: https://img-blog.csdnimg.cn/20200625231851514.png?
[20200626194452911.png]: https://img-blog.csdnimg.cn/20200626194452911.png