vue路由的基本使用

1.概念与原理

1.1 vue-router的理解

是vue的一个插件库，专门用来实现SPA应用

1.2 对SPA应用的理解

（1）整个应用只有一个完整的页面
（2）点击页面中的导航链接不会刷新页面，只会做页面的局部更新
（3）数据需要通过ajax请求获取

1.3 什么是路由

（1）一个路由就是一组(key-value)映射关系
（2）key为路径，value可能是function或component

1.3.1 1 路由分类

• 后端路由：
  （1) 理解：value 是 function, 用于处理客户端提交的请求。
  （2) 工作过程：服务器接收到一个请求时, 根据请求路径找到匹配的函数来处理请求, 返回响应数据。
• 前端路由：
  （1) 理解：value 是 component，用于展示页面内容。
  （2) 工作过程：当浏览器的路径改变时, 对应的组件就会显示

1.4 前端路由的工作方式

（1）用户点击了页面上的路由链接
（2）导致了 URL 地址栏中的 Hash 值发生了变化
（3）前端路由监听了到 Hash 地址的变化
（4）前端路由把当前 Hash 地址对应的组件渲染都浏览器中

2.路由的基本使用

2.1 vue-router 的版本

vue-router 目前有 3.x 的版本和 4.x 的版本。其中：
⚫ vue-router 3.x 只能结合 vue2 进行使用，vue-router 3.x 的官方文档地址：https://router.vuejs.org/zh/
⚫ vue-router 4.x 只能结合 vue3 进行使用，vue-router 4.x 的官方文档地址：https://next.router.vuejs.org/

2.2 vue-router 4.x 的基本使用步骤

（1）在项目中安装 vue-router
npm install vue-router@next -S
（2）main.js中应用插件

//引入VueRouter
import VueRouter from 'vue-router'
//应用插件
Vue.use(VueRouter)

（3）编写路由配置项(创建router文件夹，新增index.js)

// 该文件专门用于创建整个应用的路由器
import VueRouter from 'vue-router'
//引入组件
import About from '../components/About'
import Home from '../components/Home'

//创建并暴露一个路由器
export default new VueRouter({
	routes:[
		{
			path:'/about',
			component:About
		},
		{
			path:'/home',
			component:Home
		}
	]
})

（4）定义路由组件

(5) 在App.vue中声明路由链接和占位符

<template>
  <!-- 声明路由链接 -->
  <!-- 注意：/home会被解析为hash地址 #/home -->
  <router-link class="list-group-item" active-class="active" to="/about">About</router-link>
  <router-link class="list-group-item" active-class="active" to="/home">Home</router-link>        
  <!-- 声明路由占位符 -->
  <router-view></router-view>
</template>
<script>
export default {
  name: "App"
}
</script>

2.3 注意点

（1）路由组件通常放在pages文件夹，一般组件通常放在components文件夹
（2）通过切换“隐藏”了的路由组件，默认是被销毁的，需要的时候再去挂载
（3）每个组件都有自己的$route属性，里面存储着自己的路由信息
（4）整个应用只有一个router，可以通过组件的$route属性获取到

3.路由的高级使用

3.1 嵌套(多级)路由

通过路由实现组件的嵌套展示，叫做嵌套路由。
(1) 在父路由规则中，通过 children 属性嵌套声明子路由规则

import Tab1 from "./tabs/Tab1.vue";
import Tab2 from "./tabs/Tab2.vue";
const router = createRouter({
  routes: [
    { //about 页面的路由规则
      path: "/about",
      component: About,
      children: [ // 通过children配置子级路由
        { path: "tab1", component: Tab1 }, //访问/about/tab1时，显示Tab1组件
        { path: "tab2", component: Tab2 }, //访问/about/tab2时，显示Tab2组件
      ],
    },
  ],
});

(2) 声明子路由链接和子路由占位符

<template>
  <h1>MyAbout组件</h1>
  <!-- 在关于页面中，声明两个子路由链接 -->
  <router-link to="/about/tab1">tab1</router-link>&nbsp;&nbsp;
  <router-link to="/about/tab2">tab2</router-link>
  <!-- 在关于页面中，声明tab1和tab2的路由占位符 -->
  <router-view></router-view>
</template>

3.2 路由的query参数

（1）传递参数
Message.vue

<li v-for="m in messageList" :key="m.id">
	<!-- 跳转路由并携带query参数，to的字符串写法 -->
	<router-link :to="`/home/message/detail?id=${m.id}&title=${m.title}`">{{m.title}}</router-link>
	<!-- 跳转路由并携带query参数，to的对象写法 -->
	<router-link 
		:to="{
			path:'/home/message/detail',
			query:{
				id:m.id,
				title:m.title
			}
		}"
	>跳转</router-link> 
</li>
<script>
	export default {
		name:'Message',
		data() {
			return {
				messageList:[
					{id:'001',title:'消息001'},
					{id:'002',title:'消息002'},
					{id:'003',title:'消息003'}
				]
			}
		},
	}
</script>

（2）接收参数
Detail.vue

<template>
	<ul>
		<li>消息编号：{{$route.query.id}}</li>
		<li>消息标题：{{$route.query.title}}</li>
	</ul>
</template>

3.3 命名路由

（1）作用：可以简化路由的跳转
（2）使用
①给路由命名

{
	path:'/demo',
	component:Demo,
	children:[
		{
			path:'test',
			component:Test,
			children:[
				{
					name:'hello',
					path:'welcome',
					component:Hello,
				}
			]
		}
	]
}

②简化跳转

<!-- 简化前,需要写完整的路径 -->
<router-link to="/demo/test/hello">跳转</router-link>
<!-- 简化后,直接通过名字跳转 -->
<router-link :to="{name:'hello'}">跳转</router-link>

3.4 路由重定向

（1）问题：网页打开，url 默认是 / 路径，未匹配到组件时，会出现空白
（2）说明：重定向 → 匹配path后, 强制跳转path路径
（3）语法： { path: 匹配路径, redirect: 重定向到的路径 },

（4）效果

3.5 Vue路由 - 404

（1）作用：当路径找不到匹配时，给个提示页面
（2）位置：配在路由最后
（3）语法：path: “*” (任意路径) – 前面不匹配就命中最后这个

3.6 Vue路由 - 模式设置

（1）问题: 路由的路径看起来不自然, 有#，能否切成真正路径形式?
①hash路由(默认) 例如: http://localhost:8080/#/home
②history路由(常用) 例如: http://localhost:8080/home (以后上线需要服务器端支持)

3.7 路由高亮

可以通过如下的两种方式，将激活的路由链接进行高亮显示：
(1) 使用默认的高亮 class 类
查看源码可以发现，被激活的路由链接，默认会应用一个叫做 router-link-active 的类名。开发者可以使用此类名选择器，为激活的路由链接设置高亮的样式：

//在index.css全局样式表中，重置router-link-active的样式
.router-link-active {
  background-color: red;
  color: white;
  font-weight: bold;
}

(2) 自定义路由高亮的 class 类
在创建路由的实例对象时，开发者可以基于 linkActiveClass 属性，自定义路由链接被激活时所应用的类名：

.router-active {
  background-color: pink;
  color: white;
  font-weight: bold;
}

3.8 动态路由匹配

（1） 动态路由的概念
动态路由指的是：把 Hash 地址中可变的部分定义为参数项，从而提高路由规则的复用性。
（2）动态路由的使用
在 vue-router 中使用英文的冒号（:）来定义路由的参数项。示例代码如下：
①App.vue

<template>
  <h1>vue-router的基本使用</h1>
  <!-- 声明路由链接 -->
  <router-link to="/movie/1">电影1</router-link><br>&nbsp;&nbsp;
  <router-link to="/movie/2">电影2</router-link><br>&nbsp;&nbsp;
  <router-link to="/movie/3">电影3</router-link><br>
  <!-- 声明路由占位符 -->
  <router-view></router-view>
</template>

②router.js

//路由中的动态参数以 : 进行声明，冒号后面的是动态参数的名称 
 { path: "/movie/:id", component: Movie },

(3)$route.params 参数对象
通过动态路由匹配的方式渲染出来的组件中，可以使用 $route.params 对象访问到动态匹配的参数值.
冒号后面的参数叫什么，就点什么

(4)使用 props 接收路由参数
为了简化路由参数的获取形式，vue-router 允许在路由规则中开启 props 传参
①在定义路由规则时，声明props：true 选项
{ path: “/movie/:id”, component: Movie, props: true }
②使用props接收路由规则中匹配到的参数项
③直接使用props中接收到的路由参数

<template>
  <h1>电影---{{ id }}</h1>
</template>
<script>
export default {
  props: ['id']
}
</script>

3.9 编程式导航

（1）通过调用 API 实现导航的方式，叫做编程式导航。与之对应的，通过点击链接实现导航的方式，叫做声明式导航。
（2）vue-router 提供了许多编程式导航的 API，其中最常用的两个 API 分别是：
① this.$router.push(‘hash 地址’)
⚫ 跳转到指定 Hash 地址，从而展示对应的组件

  teacherApi.addTeacher(this.teacher)
        .then(response => {
          //提示信息
          this.$message({
            type: 'success',
            message: '添加成功!'
          });
          this.$router.push({ path: "/teacher/table" });
        })

② this.$router.go(数值 n)
⚫ 实现导航历史的前进、后退