一、什么是 vue-router

Vue官方的一个路由插件，是一个第三方包

vue-router 的官方文档地址🔗：Vue Router

二、VueRouter 的 使用

image.png

2.1. 安装vue-router

yarn add vue-router@3.6.5
#或
npm i vue-router@3.6.5

指定版本号Vue2.0对应vue-router3.x。

2.2. 创建路由模块

在 src 源代码目录下，新建 router/index.js 路由模块，并初始化如下的代码：

//1、导入Vue和VueRouter的包
import Vue from "vue";
import VueRouter from "vue-router";

//2、调用Vue.use函数，把VueRouter安装为Vue的插件
Vue.use(VueRouter);

//3、创建路由的实例对象
const router = new VueRouter();

//4、向外共享路由的实例对象
export default router;

2.3. 导入并挂载路由模块

在 src/main.js 入口文件中，导入并挂载路由模块。示例代码如下：

//1、导入路由模块 目的：拿到路由的实例对象
//import router from '@/router/index.js'
// 在进行模块化导入的时候，如果给定的是文件夹，则默认导入这个文件夹下，名字叫做 index.js 的文件
import router from "@/router";

new Vue({
  render: (h) => h(App),
  //2、挂载路由模块
  // 在 Vue 项目中，要想把路由用起来，必须把路由实例对象，通过下面的方式进行挂载
  // router: 路由的实例对象
  //router: router 属性名和属性值一样可以简写
  router,
}).$mount("#app");

注：在项目开发中如果使用vue-cli创建时勾选路由会自动创建router里面的index.js并生成初始化代码，同时在main.js中导入并挂载。

image.png

2.4. 总结

image.png

三、声明式导航

3.1. 使用router-link替代a标签实现高亮

image.png

3.2. 自定义匹配的类名

image.png
image.png

四、Vue路由 - 重定向

image.png

五、Vue路由 - 404

image.png

六、Vue路由 - 模式设置

image.png

七、编程式导航- 基本跳转

7.1. path跳转

image.png

7.2. name跳转

image.png

7.3. 小结

image.png

附：Vue3路由跳转

https://www.jianshu.com/p/568ddf7c477d