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',
			component: User,
			children: [
				{
   
					path: 'moreInfo',
					component: MoreInfo
				}  // 嵌套路由
			]
		}  // 路由对象
	]  // 配置项 routes
})

---

VueRouter 的基本使用

---

路由的跳转

在模板中使用组件 进行路由的跳转。

组件 是对 HTML 标签 的封装，最终转换为相应的 HTML标签 。

组件 ：

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

示例：

<router-link to="/user">linkrouter-link>

展示路由组件

组件 用于标记展示与路由匹配的组件的位置。

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

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

示例：

<router-link to="/user">linkrouter-link>

<router-view/>

---

传递参数

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

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

  • 在路由路径中携带参数

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

  • 使用跳转路由对象。

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

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

示例：

1. 向路由组件传递参数

<<