Vue 插件：VueRouter

VueRouter 是一个 Vue 插件，用于实现 SPA（single page web application） 应用。

SPA（single page web application） 应用，即单页面应用。整个应用只有一个 .html 文件，通常命名为 index.html 。

SPA 应用使得客户端应用不需要向服务端请求包含完整页面的数据，而是仅请求刷新页面所需的数据，SPA 应用根据请求到的数据，在客户端对页面进行更新。这减少了客户端与服务端之间通信的数据量。

---

（后文中的所有示例，都在 Vue CLI 中进行。）

---

安装 VueRouter

关于 VueRouter 的版本：

• Vue2 使用 vue-router3
• Vue3 使用 vue-router4

安装 vue-router3

• 通过 npm 为 Vue2 安装 vue-router3 ：npm i vue-router@3

---

搭建 VueRouter 环境

Vuerouter 相关的文件一般放在文件夹 router 中。

1. 创建 Vuerouter 实例

   • 在文件夹 scr 中创建文件夹 router
   • 在文件夹 router 中创建文件 index.js
   • 编辑 index.js ：

     // 引入 VueRouter
     import VueRouter from 'vue-router'
     // 引入组件
     import BUser from '../pages/B-User-43'
     import CMoreInfo from '../pages/C-MoreInfo-43.vue'
     
     // 创建 VueRouter 实例，即路由器
     const router = new VueRouter({
         routes: [
             {
                 path: '/user',  // 路径名称
                 component: BUser  // 与路由关联的组件
             },  // 路由
             {
                 path: '/moreInfo',
                 component: CMoreInfo
             }
         ]  // 配置项 routes
     })
     
     // 默认导出 router
     export default router
     

2. 为 Vue 实例配置 Vuerouter 实例

   • 编辑 main.js ：

     import Vue from 'vue'
     import App from './App.vue'
     // 引入 VueRouter
     import VueRouter from 'vue-router'
     // 引入 VueRouter 实例
     import router from './router'
     
     // 使用插件 VueRouter
     Vue.use(VueRouter)
     
     Vue.config.productionTip = false  // 关闭 Vue 的生产提示
     
     new Vue({
       render: h => h(App),
       router  // 配置项 router ，配置 VueRouter 实例
     }).$mount('#app')
     

VueRouter 实例被称为路由器（router）。

---

配置路由

通过 VueRouter 配置对象的配置项 route 配置路由。

VueRouter 配置对象

• 配置项 routes ，值为数组，元素为路由对象，用于配置路由。

路由对象

• 配置项 path ，值为字符串，路由的路径名称。

  名称需要以 / 开头

• 配置项 component ，值为对象，配置与路由匹配的组件。
• 配置项 children ，值为数组，元素为路由配置对象，配置嵌套路由。

  嵌套路由的路径名称不需要以 / 开头

与路由匹配的组件被称为路由组件，一般放在文件夹 src/pages 中。

为 Vue 实例配置 Vuerouter 实例后，Vuerouter 会为 Vue 实例和路由组件实例添加以下属性：

• $route ，路由有关的数据。
• $router ，路由器。

示例：

const router = new VueRouter({
	routes: [
		{
			path: '/user',
			conponent: User,
			children: [
				{
					path: 'moreInfo',
					conponent: MoreInfo
				}  // 嵌套路由
			]
		}  // 路由对象
	]  // 配置项 routes
})

---

VueRouter 的基本使用

---

路由的跳转

在模板中使用组件 <router-link> 进行路由的跳转。

组件 <router-link> 是对 HTML 标签 <a> 的封装，最终转换为相应的 HTML标签 <a> 。

组件 <router-link> ：

• 属性 to ，指定跳转的路由路径。
• 属性 active-class ，指定被激活时的样式。

示例：

<!-- 跳转路由 -->
<router-link to="/user">link</router-link>

展示路由组件

组件 <router-view> 用于标记展示与路由匹配的组件的位置。

当在使用组件 <router-view> 的组件内进行路由跳转时，VueRouter 会在组件 <router-view> 的位置生成与路由匹配的组件。

当跳转到下一个路由时，VueRouter 会销毁当前正在展示的组件，转而展示下一个路由匹配的组件。

示例：

<router-link to="/user">link</router-link>
<!-- 展示路由组件 -->
<router-view/>

---

传递参数

向跳转的目标路由组件传递参数。

• 使用指令 v-bind 绑定组件 <router-link> 的属性 to ，然后设置属性 to 的值。
• 属性 to 的值有两种形式：

  • 在路由路径中携带参数

    使用模板字符串。
    在路由路径后添加 ? 接着添加参数名，并给参数赋值。
    多个参数之间使用 & 进行分隔。

  • 使用跳转路由对象。

    配置项 path ，值为字符串，指定路由路径。
    配置项 query ，值为对象，属性为要传递的参数。

传递给目标路由组件的参数，会被存储在目标路由组件的属性 $route.query 中。

示例：

1. 向路由组件传递参数

<!-- 在路由路径字中携带参数 -->
<router-link :to="`/user/moreInfo?sex=${moreInfo.sex}&birthday=${moreInfo.birthday}`">link</router-link>

<!-- 使用跳转路由对象 -->
<router-link :to="{
  path: '/user/moreInfo',
  query: [
    sex: moreInfo.sex,
    birthday: moreInfo.birthday
  ]
}"/>link</router-link>

2. 路由组件获取参数

<template>
  <div>
      <!-- 获取参数 -->
    <h>{{$route.query.sex}}</h>
    <h>{{$route.query.birthday}}</h>
  </div>
</template>

<script>
  export default {
    // ...
    mouted() {
      console.log(this.$route.query.sex)  // 获取参数
      console.log(this.$route.query.birthday)
    }
  }
</script>

---

命名路由

为路由设置一个名字，在跳转路由时，可以使用路由的名字进行跳转。

配置命名路由：

在配置路由时，通过配置路由对象的配置项 name ，来为路由添加一个名字。

路由对象

• 配置项 name ，指定路由的名字。

跳转命名路由：

关于组件 <router-link> 的属性 to 的值：

• 直接使用命名路由的名字

• 使用跳转路由对象

配置项 name ，值为字符串，指定路由的名字。

示例：

• 配置命名路由

  const router = new VueRouter({
    routes: [
      {
        name: 'user',  // 配置路由的名字
        path: '/user',
        component: User,
        children: [
          {
            name: 'moreInfo',
            path: 'moreInfo',
            component: MoreInfo
          }
        ]
      }
    ]
  })
  

• 跳转命名路由

  <!-- 直接使用命名路由的名字 -->
  <router-link to="user">link</router-link>
  
  <!-- 使用跳转路由对象 -->
  <router-link :to="{
    name: 'moreInfo',
    query: [data]
  }">link</router-link>
  

---

传递参数（补充）

由 Vue 组件的配置项 props 接收路由传递的参数。

用于简化在路由组件中使用参数的代码。

通过配置路由对象的配置项 props ，可以获取向路由组件传递的参数，并使参数可以被路由组件的配置项 props 接收。

路由对象

• 配置项 props ，值为函数。
  • 提供一个参数：路由组件的属性 $route ，可以获取传递给路由组件的参数。
  • 返回值：对象，对象中的属性可以由路由组件的配置项 props 接收。

示例：

1. 配置路由对象的配置项 props

const router = new VueRouter({
  routes: [
    {
      path: '/user',
      component: User,
      props(route) {
        return {
          name: route.query.name,
          username: route.query.username
        }
      }  // 配置项 props
    }
  ]
})

2. 向路由组件传递参数

<router-link :to="{
  path: '/user',
  query: [
    name: data.name,
    username: data.username
  ]
}"/>link</router-link>

3. 由路由组件的配置项 props 接收参数

<template>
  <div>
    <h>{{name}}</h>
    <h>{{username}}</h>
  </div>
</template>

<script>
  export default {
    props: [name, username],  // 接收参数
    mounted() {
      console.log(this.name)
      console.log(this.username)
    }
  }
</script>

---

路由的历史记录

浏览器使用一个栈维护历史记录，添加历史记录有两种方式：

• push ，在栈的上方添加当前历史记录。
• replace ，使用当前历史记录替换栈上方的历史记录。

组件 <router-link> 跳转路由时默认使用 push 添加历史记录。

通过设置组件 <router-link> 的属性 replace 可以使用 replace 添加历史记录。

组件 <router-link> ：

• 属性 replace ，值为布尔值，是否使用 replace 添加历史记录。

示例：

<router-link replace to="/user">limk</router-link>

---

编程式路由跳转

使用路由组件的属性 $router 进行路由跳转。

• $router.push()

  • 功能：以 push 的方式跳转路由。
  • 接收一个参数：跳转路由对象。

• $router.replace()

  • 功能：以 replace 的方式跳转路由。
  • 接收一个参数：跳转路由对象

• $router.back()

  • 功能：根据历史记录，往后跳转路由。

• $router.forward()

  • 功能：根据历史记录，往前跳转路由。

• $router.go()

  • 功能：根据历史记录，按照指定步数跳转路由。
  • 接收一个参数：数值，指定跳转步数。

示例：

<template>
  <div>
    <button @click="push">push</button>
    <button @click="back">back</button>
  </div>
</template>

<script>
  export default {
    // ...
    methods: {
      push() {
        this.$router.push({
          path: '/user'
          query: [
            name: this.user.name
            username: this.user.username
          ]
        })  // 以 push 的方式跳转路由
      },
      back() {
        this.$router.back()  // 根据历史记录，往后跳转路由
      }
    }
  }
</script>

---

缓存指定的路由组件

使用组件 <keep-alive> ，来缓存路由组件。

在跳转路由时，不销毁之前在组件 <router-view> 上展示的路由组件，而是将其进行缓存。当路由跳转返回到该路由组件时，使用之前缓存的数据渲染该路由组件。

通常用于保留路由组件中的输入性数据。

缓存路由组件

• 缓存所有路由组件

  使用组件 <keep-alive> 包裹组件 <router-view> ，VueRouter 将缓存所有在 <router-view> 上展示的路由组件。

• 缓存一个路由组件

  设置组件 <keep-alive> 的属性 include ，指定需要缓存的组件。

  组件 <keep-alive>

  • 属性 include ，值为组件的名字，指定需要缓存的组件，VueRouter 将缓存指定的路由组件。

• 缓存多个路由组件

  指定缓存多个组件，使用指令 v-bind 绑定组件 <keep-alive> 的属性 include ，并向其提供元素为组件名的数组，VueRouter 将缓存数组中指定的路由组件。

示例：

<!-- 缓存一个路由组件 -->
<keep-alive include="user">
  <router-view/>
</keep-alive>

<!-- 缓存多个路由组件 -->
<keep-alive :include="['user', 'moreInfo']">
  <router-view/>
</keep-alive>

---

VueRouter 的生命周期函数

VueRouter 为路由组件添加了两个生命周期函数

生命周期函数 activated() ，当路由组件在 <router-view> 上被展示时被调用。

生命周期函数 deactivated() ，当路由组件在 <router-view> 上取消展示时被调用。

示例：

<script>
  export default {
    // ...
    activated() {
      console.log('is activated')
    },
    deactivated() {
      console.log('is deactivated')
    }
  }
</script>

---

路由守卫

路由守卫，拦截路由的跳转，对路由跳转进行监视，在进行路由跳转时会调用相应的函数。

---

路由元数据

路由元数据，即路由携带的数据。

通过配置路由对象的配置项 meta ，来为路由添加元数据。

路由对象

• 配置项 meta ，值为对象，为路由添加（元）数据。

示例：

const router = new VueRouter({
  routes: [
    {
      path: '/user',
      component: User,
      meta: {
        permission: 'user'
      }  // 配置元数据
    }
  ]
})

---

全局路由守卫

全局路由守卫，有两种：

• 全局前置路由守卫

  在每次路由跳转之前被调用，拦截路由的跳转，通过 VueRouter 实例的方法 beforeEach() 进行配置。

  VueRouter 实例的方法 beforeEach() ：

  • 接收一个参数：函数，函数提供三个参数：
    1. to ，对象，路由跳转的目标路由。
    2. from ，对象，路由跳转的起始路由。
    3. next ，函数，执行路由跳转，对路由跳转放行。

• 全局后置路由守卫

  在每次路由跳转之后被调用，通过 VueRouter 实例的方法 afterEach() 进行配置。

  VueRouter 实例的方法 afterEach() ：

  • 接收一个参数：函数，函数提供两个参数：
    1. to ，对象，路由跳转的目标路由。
    2. from ，对象，路由跳转的起始路由。

示例：

const router = new VueRouter({
  routes: [
    {
      path: '/user',
      component: User,
      meta: {
        permission: 'user'
      },
      children: [
        {
          path: 'moreInfo',
          component: MoreInfo,
          meta: {
            requireAuth: true
          }
        }
      ]
    }
  ]
})

// 全局前置路由守卫
router.beforeEach(
  (to, from, next) => {
    if(to.meta.requireAuth) {
      if(from.meta.permission === 'user') {
        next()  // 执行路由跳转
      }
      else {
        alert('need a permission!')
      }
    }
    else {
      next()
    }
  }
)

// 全局后置路由守卫
router.afterEach(
  (to, from) => {
    console.log('to:', to)
    console.log('from:', from)
  }
)

export default router

---

独享路由守卫

独享路由守卫，即路由自身的路由守卫，当路由跳转到当前路由之前被调用。

通过配置路由对象的配置项 beforeEnter ，来为路由添加独享路由守卫。

路由对象

• 配置项 beforeEnter ， 值为函数，函数提供三个参数：
  1. to ，对象，路由跳转的目标路由。
  2. from ，对象，路由跳转的起始路由。
  3. next ，函数，执行路由跳转，对路由跳转放行。

示例：

const router = new VueRouter({
  routes: [
    {
      path: '/user',
      component: User,
      meta: {
        permission: 'user'
      },
      children: [
        {
          path: 'moreInfo',
          component: MoreInfo,
          meta: {
            requireAuth: true
          },
          beforeEnter(to, from, next) {
            if(to.meta.requireAuth) {
              if(from.meta.permission === 'user') {
                next()  // 执行路由跳转
              }
              else {
                alert('need a permission!')
              }
            }
            else {
              next()
            }
          }  // 配置独享路由守卫
        }
      ]
    }
  ]
})

---

组件路由守卫

VueRouter 为路由组件提供了两个配置项，用于拦截、监视路由的跳转。

• 配置项 beforeRouterEnter ，值为函数，当路由跳转到当前路由组件之前被调用。函数提供三个参数：

  1. to ，对象，提供路由跳转的目标路由。
  2. from ，对象，提供路由跳转的起始路由。
  3. next ，函数，执行路由跳转，对路由跳转放行。

• 配置项 beforeRouterLeave ，值为函数，在当前路由组件进行路由跳转，离开当前路由组件之前被调用。函数提供三个参数：

  1. to ，对象，提供路由跳转的目标路由。
  2. from ，对象，提供路由跳转的起始路由。
  3. next ，函数，执行路由跳转，对路由跳转放行。

示例：

<script>
  export default {
    // ...
    beforeRouterEnter(to, from, next) {
      if(to.meta.requireAuth) {
        if(from.meta.isHoldPermission) {
          next()  // 执行路由跳转
        }
        else {
          alert('need a permission!')
        }
      }
      else {
        next()
      }
    },  // 进入组件前
    beforeRouterLeave(to, from, next) {
      console.log('to:', to)
      console.log('from:', from)
      next()
    }  // 离开组件前
  }
</script>

---

路由路径的模式

URL 路径的 hash 值（哈希值）

URL 路径中在 /#/ 之后的路径被称为 hash 值。

URL 路径中的 hash 值不会作为请求发送给服务器。

VueRouter 的路由路径有两种模式：

• hash 模式，路由路径将作为 URL 路径的 hash 值。
• history 模式，路由路径将作为真实的 URL 路径，而不是 hash 值。

通过配置 VueRouter 配置对象的配置项 modle ，设置路由路径的模式。

VueRouter 配置对象

• 配置项 modle，值为字符串，指定路由路径的模式，可选模式：
  • hash
  • history

示例：

const router = new VueRouter({
  modle: 'hash',
  routes: [
    {
      path: '/user',
      component: User
    }
  ]
})

---