router-link点击的时候高亮

要实现路由链接（`router-link`）点击时的高亮效果，可以使用 Vue Router 提供的 `router-link-active` 类名。

首先，在路由链接中添加 `exact` 属性，确保只有在精确匹配路由时才会添加 `router-link-active` 类名：

<router-link to="/" exact>Home</router-link>
<router-link to="/about">About</router-link>
<router-link to="/contact">Contact</router-link>

然后，在样式表中添加 `router-link-active` 类名的样式：

.router-link-active {
  color: red;
  font-weight: bold;
}

以上样式会使路由链接在被点击后变为红色并加粗。

如果需要自定义 `router-link-active` 类名，可以通过在路由配置中传递 `linkActiveClass` 选项来实现：

const router = new VueRouter({
  routes: [
    // ...
  ],
  linkActiveClass: 'my-active-class'
})

然后在样式表中使用 `.my-active-class` 类名即可。

相关问题

router-link点击切换高亮

使用router-link可以通过设置active-class属性来实现路由切换时对应文字高亮的效果。在router-link标签上添加active-class属性，并为其指定一个class名，然后在样式表中设置该class名的样式，即可实现高亮效果。

例如，在HTML代码中：

<ul>
  <li>
    <router-link to="/films" active-class="liuliufilms">电影</router-link>
  </li>
  <li>
    <router-link to="cinemas" active-class="liuliufilms">影院</router-link>
  </li>
  <li>
    <router-link to="active" active-class="liuliufilms">票价</router-link>
  </li>
  <li>
    <router-link to="center" active-class="liuliufilms">我的</router-link>
  </li>
</ul>

然后在样式表中添加对应的样式：

.liuliufilms {
  color: red;
  /* 设置高亮的样式 */
  text-decoration: underline;
}

这样，在点击对应的路由链接时，该链接的文字就会显示高亮效果。

router-link解决高亮

在Vue中，可以使用router-link组件来创建导航链接，并且可以通过设置class来实现高亮效果。以下是两种方法来解决router-link的高亮问题：

1. 使用路由规则配置项linkActiveClass：

const router = new VueRouter({
  routes: [
    {
      path: '/home',
      component: Home,
      meta: { activeClass: 'active' } // 设置自定义的高亮类名
    },
    // 其他路由规则...
  ],
  linkActiveClass: 'router-link-active' // 设置全局的高亮类名
})

在上述代码中，我们可以通过在路由规则的meta字段中设置activeClass来为特定的路由设置自定义的高亮类名。同时，通过在VueRouter实例中设置linkActiveClass来修改全局的高亮类名。

2. 使用router-link的to和exact属性：

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

在上述代码中，我们可以直接在router-link组件上添加class属性，并设置为需要的高亮类名。同时，可以使用exact属性来确保只有在完全匹配路由路径时才会添加高亮类名。