Vue Router

（1）、名词解释：（用到的一些技术）

1、SPA

single page application（单页面应用程序），即在整个应用中，只有一个 html 页面，在用户与应用之间实现交互时能够动态更新页面内容。

2、前端路由

利用 hash 或 history 改变不会向后端发起新的 html 请求

3、模式

• hash：利用 URL 中 #hash hash 值改变后，不会发送新的网络请求的特点，来实现的路由。使用如 #/home、#/login 类似的方式来表示所请求的前端 URL 资源。
• history：利用 h5 中 history 新增的 API pushState()、replaceState() 来实现。其路由的格式与服务端路由 URL 格式一致（比 hash 模式来说，没有多余的如 # 之类的符号），但是，这种路由模式要用好，还需要服务端配置。

4、两种模式对比

• Hash 模式只可以更改 # 后面的内容，History 模式可以通过 API 设置任意的同源 URL
• History 模式可以通过 API 添加任意类型的数据到历史记录中，Hash 模式只能更改哈希值，也就是字符串
• Hash 模式无需后端配置，并且兼容性好。History 模式在用户手动输入地址或者刷新页面的时候会发起 URL 请求，后端需要配置 index.html 页面用于匹配不到静态资源的时候

（2）、Vue Router安装、配置

1、定义:

是 Vue.js 官方的路由管理器，是一个核心插件，与 Vue.js 高度集成。

2、安装:

$ npm i vue-router@3.5.3
# 或
$ yarn add vue-router@3.5.3

注意：因为我这里安装的是vue2.x版本，这里对应安装Vue Router的3.5.3的版本

3、定义Vue Router对象:

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '@/views/Home'
import Login from '@/views/Login'

// 使用路由插件
Vue.use(VueRouter)

// 创建 VueRouter 对象
const router = new VueRouter({
  mode: 'hash', // 路由模式，可取 hash、history，默认为 hash
  routes: [ // 静态路由的配置信息
    {
      path: '/home', // 当 URL 中访问地址为 /home 时
      component: Home, // 拿 Home 组件渲染
    },
    {
      path: '/login',
      component: Login,
    },
  ],
})

// 导出路由对象
export default router

在 Vue 组件中使用 Vue Router 时，可使用 Vue Router 提供的两个内置组件：

• router-link：链接，相当于a标签
• router-view：视图，用于渲染访问路径所对应的组件（其实就是占位的）

4、注入router到vue根实例:

// 引入 router
import router from './router'

new Vue({
  router,
}).$mount('#app')

当在 Vue 根实例中注入了 router 后，在 vue 组件中会自动注入如下两个属性：

• $router：代表 VueRouter 对象实例
• $route：代表的是当前激活的路由对象

Vue Router补充：详细内容可参考大神的文章vue-router

（3）、补充

1、路由的默认路径

路由的默认路径
默认情况下，进入网站的首页，我们希望渲染首页的内容。
但是我们的实现中，默认没有显示首页组件，必须让用户点击才可以。

如何可以让路径默认跳转到首页，并且渲染首页组件呢？
我们需要多配置一个映射就可以了

{
  path: '/',
  redirect: '/home'
},

配置解析：

• 我们在routes中又配置一个映射
• path配置的是根路径：/
• redirect是重定向，也就是我们将根路径重定向到/home的路径下，这样就可以得到我们想要的结果了。

2、router-link

使用路由: 通过< router-link>和< router-view>

< router-link>: 该标签是一个vue-router中已经内置的组件, 它会被渲染成一个< a>标签
< router-view>：该标签会根据当前的路径，动态渲染出不同的组件。

router-link属性介绍:

1. to：用于指定跳转的路径 —重点掌握

2. tag：tag可以指定< router-link>之后渲染成什么组件，比如我们下面的代码会被渲染成一个< li>元素，而不是< a> 。 如：< router-link to=‘/home’ tag=‘li’> —重点掌握
   这里使用了element_UI组件进行渲染
   

3. replace：replace不会留下history记录，所以指定replace的情况下，后退键返回不能返回到上一个页面中
   

4. A、active-class：当< router-link>对应的路由匹配成功时，会自动给当前元素设置一个router-link-active的class，设置active-class可以修改默认的名称。但是通常不会修改类的属性, 会直接使用默认的router-link-active即可
   
   B、修改linkActiveClass
   
   exact-active-class类似于active-class, 只是在精准匹配下才会出现的class
   
   

3、编程式导航

（1）、声明式导航：

即通过点击链接实现导航的方式
例如：< a>标签或vue中的< router-link>标签

（2）、编程式导航：

即通过调用JavaScript形式的API实现导航的方式
例如：location.href

基本用法：
跳转到指定的页面：

this.$router.push('地址')

前进后退：

this.$router.go(n)  n是数字，1代表前进一步，-2代表后退两步

4、动态路由

在某些情况下，一个页面的path路径可能是不确定的，比如我们进入用户界面时，希望是如下的路径：

• /user/aaa或/user/bbb
• 除了有前面的/user之外，后面还跟上了用户的ID
• 这种path和Component的匹配关系，我们称之为动态路由（也是路由传递数据的一种方式）

5、路由懒加载

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

• 方式一：结合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 ' )

推荐方式三！

6、嵌套路由

• 创建对应的子组件, 并且在路由映射中配置对应的子路由
• 在组件内部使用标签
• 嵌套路由也可以配置默认的路径

7、路由传递参数

详细的内容请跳转至vue-router路由传参

8、导航守卫

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

（1）、 利用beforeEach来完成标题的修改

• 首先, 我们可以在钩子当中定义一些标题, 可以利用meta来定义

• 其次, 利用导航守卫beforeEach钩子函数，修改我们的标题.

• 导航钩子的三个参数解析:
  to: 即将要进入的目标的路由对象.
  from: 当前导航即将要离开的路由对象.
  next: 调用该方法后, 才能进入下一个钩子

（2）、如果是后置钩子, 也就是afterEach, 不需要主动调用next()函数.

9、keep-alive

详细的内容请跳转至keep-alive详解