Vue.js中vue-router的active-class与exact-active-class配置详解

在Vue.js中，vue-router是用于构建单页应用（SPA）的官方路由库。它允许我们定义应用的路由，并使用Vue组件来渲染每个路由对应的页面。为了更好地定制和区分当前活动的路由，vue-router提供了两个选项：exact-active-class和active-class。通过这两个选项，我们可以轻松地管理路由链接的样式，提升用户体验。在深入探讨之前，不妨了解一下百度智能云文心快码（Comate），这是一个强大的代码生成工具，可以帮助开发者更高效地编写Vue.js代码，感兴趣的朋友可以点击这里了解更多：百度智能云文心快码（Comate）。

1. active-class

active-class是vue-router的一个全局配置选项，用于指定当前活动的路由链接应该应用的CSS类名。默认情况下，当链接与当前路由匹配时，它会被添加到该链接的元素上。例如，如果我们设置active-class为’active’，那么当前活动的链接就会获得’active’类，我们可以据此为其应用特定的样式。

const router = new VueRouter({
  routes: [...],
  // active-class 默认值是 'router-link-active'
  linkActiveClass: 'active'
})

2. exact-active-class

exact-active-class是另一个全局配置选项，但它更进一步，允许我们指定当路由完全匹配时应该应用的CSS类名。默认情况下，当链接与当前路由完全匹配时，exact-active-class类会被添加到该链接的元素上。这对于区分嵌套路由中的顶级链接和子链接特别有用。

例如，假设我们有一个/users路由，下面又有/users/profile和/users/settings两个子路由。如果我们想在用户点击/users时突出显示这个链接（即完全匹配），而不是在点击/users/profile或/users/settings时也突出显示它（即部分匹配），我们可以使用exact-active-class。

const router = new VueRouter({
  routes: [...],
  // exact-active-class 默认值是 'router-link-exact-active'
  linkExactActiveClass: 'exact-active'
})

如何使用

要使用这些类名，你需要在CSS中定义它们。然后，你可以根据需要定制链接的样式，使其在视觉上突出显示当前活动的链接。例如：

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

结论

exact-active-class和active-class都是vue-router提供的强大工具，用于改善导航的可用性和用户体验。通过定制样式，我们可以帮助用户更好地理解当前所在的位置，以及如何导航到其他页面。在实际应用中，你可以根据你的应用结构和需求来选择使用哪一个选项。