Vue3：vue-router 的高级用法

1、路由重定向

• 路由重定向指的是：用户在访问地址 A 的时候，强制用户跳转到地址 C ，从而展示特定的组件页面。通过路由规则的 redirect 属性，指定一个新的路由地址，可以很方便地设置路由的重定向：
  

2、路由高亮

• 可以通过如下的两种方式，将激活的路由链接进行高亮显示：
  ① 使用默认的高亮 class 类
  ② 自定义路由高亮的 class 类

2.1 默认的高亮 class 类

• 被激活的路由链接，默认会应用一个叫做 router-link-active 的类名。开发者可以使用此类名选择器，为激活的路由链接设置高亮的样式：
  

2.2 自定义路由高亮的 class 类

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

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

3、 嵌套路由

• 通过路由实现组件的嵌套展示，叫做嵌套路由。
  
  
  ① 声明子路由链接和子路由占位符
  ② 在父路由规则中，通过children 属性嵌套声明子路由规则

// router.js
import { createRouter, createWebHashHistory } from 'vue-router'

import Home from './MyHome.vue'
import Movie from './MyMovie.vue'
import About from './MyAbout.vue'

import Tab1 from './tabs/MyTab1.vue'
import Tab2 from './tabs/MyTab2.vue'
import Tab3 from './tabs/MyTab3.vue'

// 创建路由对象
const ro