router-link-active和router-link-exact-active

1. router-link-active

   • 用途：在Vue Router中，router-link-active是一个动态类名，用于表示当前激活的路由链接。当路由匹配到某个<router-link>组件的to属性所指定的路径时，Vue会自动给这个<router-link>组件添加router-link-active类名。
   • 应用：这个类名通常与CSS样式结合使用，以便为当前激活的路由链接添加特定的样式，如高亮显示，从而提升用户体验。

2. router-link-exact-active

   • 用途：与router-link-active类似，但router-link-exact-active的添加条件更为严格。它仅在当前路由完全匹配<router-link>组件的to属性所指定的路径时，才会被添加到该组件上。
   • 应用：这有助于在需要精确匹配路由时，避免因为子路由的激活而错误地高亮显示父路由链接。通过为router-link-exact-active类名添加特定的CSS样式，可以确保只有在完全匹配的情况下，链接才会被高亮显示。

router.push不会自动添加 router-link-active 类名的问题。

<li @click="router.push('/paymentCenter')">
       支付中心
</li>

在 Vue.js 应用中使用 Vue Router 时，<router-link> 组件是专门为 Vue Router 设计的，它会自动处理点击事件以导航到指定的路由，并且会根据路由的当前状态来添加或移除 router-link-active 类名。然而，当你直接在 <li> 元素上使用 @click 监听器并调用 router.push() 方法进行路由跳转时，Vue Router 无法自动知道这个 <li> 元素与哪个路由链接相关联，因此不会自动添加 router-link-active 类名。

解决方式：

• 使用 <router-link> 替代 <li>

最直接的方法是使用 <router-link> 替代 <li>，并通过 CSS 来模拟 <li> 的样式。例如：

<router-link to="/paymentCenter" tag="li" class="nav-item" active-class="active">  
    支付中心  
</router-link>

这里，tag="li" 属性告诉 <router-link> 渲染成一个 <li> 元素。active-class="active" 可以自定义激活时的类名（如果你希望不是默认的 router-link-active）。

•  样式调整

  如果你只是想要在点击时改变样式（而不是基于路由的当前状态），你可以直接在 <li> 元素上使用 :class 绑定和条件渲染来实现点击时的样式变化。但这与 router-link-active 的用途不同，后者是基于路由状态来添加类名的。

全局配置更改默认使用 router-link-active 类名

要更改 router-link-active 的名称，你需要在创建 Vue Router 实例时，通过 linkActiveClass 选项来指定一个新的类名。这个选项应该在你的路由配置文件中设置，通常是 router/index.js 或类似的文件。

// router/index.js  
import Vue from 'vue';  
import Router from 'vue-router';  
import Home from '@/views/Home.vue';  
  
Vue.use(Router);  
  
const router = new Router({  
  mode: 'history',  
  base: process.env.BASE_URL,  
  routes: [  
    {  
      path: '/',  
      name: 'home',  
      component: Home  
    },  
    // 其他路由...  
  ],  
  // 更改 router-link-active 的名称  
  linkActiveClass: 'custom-active-class'  
});  
  
export default router;

在这个例子中，linkActiveClass: 'custom-active-class' 将 router-link-active 的默认类名更改为 custom-active-class。现在，当 <router-link> 组件对应的路由被激活时，Vue Router 将不再添加 router-link-active 类名，而是添加 custom-active-class。

你需要在你的CSS文件中相应地更新这个类名的样式：

/* 全局样式文件或组件样式文件 */  
.custom-active-class {  
  /* 你的激活样式 */  
  color: red; /* 示例：将激活的链接颜色更改为红色 */  
}

请注意，linkActiveClass 只影响 <router-link> 组件的激活状态类名。如果还想要更改精确匹配时的类名（默认为 router-link-exact-active），可以使用 linkExactActiveClass 选项来指定一个新的类名。