使用 `rclass属性_active_在CSS中定义该类名的样式

具体步骤如下：

1. 在组件中设置 `` 的 `active-class` 属性。
2. 在CSS中定义该类名的样式。

例如：

<router-link to="/home" active-class="router-link-active">Home</router-link> <router-link to="/about" active-class="router-link-active">About</router-link>

然后在CSS中定义 `.router-link-active` 的样式：

.router-link-active { color: red; }

二、使用动态类名结合路由对象的 `$route` 属性

例如：

<router-link :class="{'router-link-active': $route.path === '/home'}" to="/home">Home</router-link>

三、利用全局导航守卫

在Vue Router中，可以这样设置：

router.beforeEach((to, from, next) => { if (to.path === '/home') { document.body.classList.add('home-route-active'); } else { document.body.classList.remove('home-route-active'); } next(); });

四、使用 `vue-router` 的 `exact-active-class` 属性

例如：

<router-link exact-active-class="exact-router-link-active" to="/home">Home</router-link>

然后在CSS中定义 `.exact-router-link-active` 的样式：

.exact-router-link-active { color: blue; }