Vue3：vue-router 的高级用法

WindyChanChan

已于 2023-03-26 17:16:52 修改

阅读量228

点赞数

分类专栏： Vue3 文章标签： vue.js javascript 前端

于 2023-01-15 21:03:34 首次发布

本文链接：https://blog.csdn.net/u013308709/article/details/128697802

版权

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