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属性来确保只有在完全匹配路由路径时才会添加高亮类名。

相关问题

router-link 高亮

在Vue Router中，router-link可以通过添加类名来实现高亮效果。默认情况下，当路由匹配当前路径时，router-link会添加router-link-exact-active和router-link-active类。你可以通过在路由规则配置中使用linkActiveClass来修改router-link-active类名。例如，你可以在main.js（或router.js）中添加以下代码：

const router = new VueRouter({
routes: [
// 路由规则配置
],
linkActiveClass: 'custom-active' // 自定义的类名
})

这样，当路由匹配到当前路径时，router-link会添加custom-active类名，从而实现高亮效果。注意，你可以将custom-active替换为你想要的任何类名。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* [router-link进行高亮设置：全局配置linkActivateClass](https://blog.csdn.net/weixin_44343544/article/details/113726767)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 33.333333333333336%"]
- *2* [Vue-路由导航菜单栏的高亮设置方法](https://download.csdn.net/download/weixin_38586279/14902227)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 33.333333333333336%"]
- *3* [如何给router-link进行高亮设置——全局配置linkActiveClass](https://blog.csdn.net/qq_36836277/article/details/97806643)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 33.333333333333336%"]
[ .reference_list ]

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;
}

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