Vue路由高亮显示的5种方法（附带实例）

Vue 中，如果两个路由链接的样式是一样的，没有明显的区分，则我们在页面上点击路由链接切换页面后，没办法确切地知道当前是在什么页面上。那么是否有一种方式可以轻松地实现当前点击目标的高亮显示呢？这是不是可以更好地增强用户体验感呢？

答案是：有这样的方式，而且不止一种！同时用户体验感也被大大增强！

利用vue-router模块的内置样式实现路由高亮显示

我们通过 Elements 审查元素能看到，通过 router-link 生成的页面，虽然通过 bootstrap 样式让元素看起来是按钮，但本质上它是 a 标签，一般被称为路由链接。点击路由链接只会切换路由，并不会发送请求，如下图所示。


细心的读者可以发现，被选中的 a 标签有 router-link-active 和 router-link-exact-active 两个类名。但是在代码编辑阶段我们并没有进行类似代码的编写，这显然是 vue-router 模块的内置样式帮助我们实现的样式绑定。

router-link-active 的意思是链接激活状态，vue-router 内置完成了激活状态的判断和样式类的设置操作，开发人员可以直接设置 router-link-active 对应的样式，来看下方代码：

<style scoped>
/* 修改 router-link-active 内置样式类的页面效果 */
.router-link-active {
  background-color: #222;
  font-weight: bolder;
}
</style>

刷新页面就可以看到高亮显示路由链接的效果，当点击“切换到用户页”路由链接时，在该路由链接上也可以实现高亮显示的效果，如下图所示。

利用active-class属性实现路由链接高亮显示

如果项目中已经存在高亮显示的样式，不需要通过 router-link-active 内置样式类实现高亮显示，那么还可以利用什么方式实现路由链接高亮显示呢？

其实 bootstrap 这一 UI 框架本身就包含一个 active 高亮激活样式类，那么是不是通过 bootstrap 这一默认的 active 样式类就可以实现高亮显示效果呢？

答案是可以的，而且不止有一种实现方式。这里以利用 router-link 的 active-class 属性为例来实现路由链接高亮显示的效果。

现在给首页的 router-link 设置一个新的属性 active-class，并设置其激活状态的样式类名为 active。刷新页面后可以发现，原来的黑色链接已经变成深灰色，同时审查元素会发现，首页中 a 链接的 router-link-active 样式类已经消失，取而代之的是 active 样式类，如下图所示：


因此利用 bootstrap 的默认 active 样式类也可以实现相同的效果。

在 App.vue 文件中给第 1 个 router-link 加上 active-class 属性。

<router-link
  active-class="active"
  to="/"
  class="btn btn-secondary"
>切换到首页</router-link>

此时刷新页面可以发现，active-class 属性已经可以成功实现高亮显示。

但是当我们点击“切换到用户页”路由链接时，就会发现“切换到用户页”路由链接的背景颜色依然是黑色，结合前面所学，显然是因为我们并没有给这一路由链接设置 active-class 属性，如下图所示。


现在我们思考下面的问题，如果项目中包含多个跳转路由链接，那么是否需要逐一设置 active-class 属性呢？如果不逐一设置，那么是不是也和“切换到用户页”这一路由链接效果一样，无法精确设置到目标呢？

这两个问题在后续可以找到答案，读者不要着急，慢慢往下读。

利用vue-router模块的linkActiveClass全局配置实现路由高亮显示

接下来对多个路由链接的高亮显示进行统一设置。

想要一次性给所有的路由链接设置自定义的高亮激活样式类，要先回到入口文件 main.js 中。在 router 对象创建的位置利用 linkActiveClass 进行全局的统一设置。同时，router-link 不再需要指定 active-class 属性，也不再需要自定义样式。

此时 main.js 文件代码如下：

const router = createRouter({
  history: createWebHashHistory(),
  routes,
  // 利用 linkActiveClass 全局配置实现路由链接的高亮显示
  linkActiveClass: 'active',
});

现在刷新页面，“切换到用户页”路由链接同样显示深灰色，并且通过审查元素 active 的样式也已经成功设置并起作用，说明全局配置高亮显示样式也没有任何问题，如下图所示。

利用router-link的slot自定义标签与高亮显示

目前从页面效果和功能上来说这没有任何的问题，能够显示类似按钮的路由链接，也能够点击按钮实现页面的路由切换，但是 router-link 默认渲染的标签目标是 a，如果想渲染 button 按钮又应该如何处理呢？

毕竟在实际开发的布局控制中，想要放置的不一定是 a 标签，也可能是 button、div、span、p 等其他的任意标签，同时希望通过点击这些标签实现页面切换。因此 router-link 能否实现自定义标签的渲染和功能的操作也是需要我们研究的内容。

在 router-link 上可以设置 custom 属性来控制路由链接内容是否被包裹在 a 元素内，还可以利用 v-slot 传递一个对象，这个对象中可以包含 href（链接地址）、route（当前路由对象）、navigate（导航函数）、isActive（是否激活）、isExactActive（是否精确激活）等不同的参数。在下面的讲解中仅传递了 navigate 与 isActive 两个参数。

设置好 custom 与 v-slot 后，就可以在 router-link 中设置插槽内容。例如，现在的操作目标是放置一个 button 按钮，则可以直接编写 button 标签。值得一提的是，button 原来的样式属性 type 及 class 都可以保留。

为了实现高亮显示，我们还可以绑定动态样式。利用 isActive 布尔值实现短路运算，让其在高亮显示的状态下使用自定义的 router-link-active 样式。同时，为了让按钮能够实现点击跳转，还需要给它绑定 click 点击事件，直接绑定插槽传递的 navigate（导航函数），就可以实现 router-link 中 to 属性的目标跳转操作。

此时 App.vue 文件代码如下：

<template>
  <div class="container">
    <!-- 利用 router-link 实现路由的声明式路由导航跳转 -->
    <router-link active-class="active" to="/" class="btn btn-secondary">切换到首页</router-link>
    <router-link to="/users" custom v-slot="{ navigate, isActive }">
      <button
        class="btn btn btn-secondary"
        :class="[isActive && 'active']"
        @click="navigate"
      >
        切换到用户页
      </button>
    </router-link>
    <hr>
    <!-- 利用 router-view 定义路由组件在此显示 -->
    <router-view></router-view>
  </div>
</template>

渲染页面后，通过审查元素可以发现，第 2 个路由链接切换到了 button 标签，并且也可以完成按钮的高亮显示操作，如下图所示。


读者可能会想，既然可以使用 router-link 的 slot 插槽实现 button 按钮的高亮显示，那其他的网页元素是不是也可以利用这种方式实现呢？答案是：可以的。

利用bootstrap改善导航页面

现在实现的导航菜单比较简陋，要在现在的基础上进行页面的美化与完善操作其实很简单，只要利用 bootstrap 这一 UI 框架即可。

具体实现可以在 bootstrap 官方网站的演示案例频道中查看头部导航的相关示例，通过查看网页源码的方式，进行相应头部导航内容的复制/粘贴和修改处理。

经过 bootstrap 处理后的 App.vue 文件代码如下：

<template>
  <div class="container">
    <header class="d-flex flex flex-wrap justify-content-center py-3 mb-4 border-bottom">
      <router-link to="/">
        <span class="d-flex align-items-center mb-3 mb-md-0 me-md-auto text-dark text-decoration-none">
          <span class="fs-4">Vue 路由</span>
        </router-link>
      <ul class="nav nav nav-pills">
        <li class="nav-item">
          <router-link to="/" class="nav-link">首页</router-link>
        </li>
        <li class="nav-item">
          <router-link to="/users" class="nav-link">用户</router-link>
        </li>
      </ul>
    </header>
    <!-- 利用 router-view 定义路由组件在此显示 -->
    <router-view></router-view>
  </div>
</template>

最终导航与路由渲染的页面被优化为更美观的显示模式，如下图所示：