Vue多布局项目如何仅在指定布局和页面添加router-link精确激活类

方案1：移除全局配置，分布局单独指定激活类（最推荐，无副作用） #

1. 先删除main.js中全局配置的linkExactActiveClass: "active"，避免全局所有路由链接都自动加激活类。
2. 各布局的导航组件单独控制：
   • 在AdminLayout/AppLayout等需要激活类的布局里，给导航的router-link主动添加exact-active-class="active"属性：

   <!-- AdminLayout.vue 导航部分 -->
   <nav>
     <RouterLink to="/user" exact-active-class="active">控制台</RouterLink>
     <RouterLink to="/user/settings" exact-active-class="active">设置</RouterLink>
   </nav>
   

   • 在LandingLayout的导航router-link不添加该属性即可，不会生成激活类。

方案2：保留全局配置，通过CSS作用域控制样式生效范围 #

如果不想修改全局路由配置，可以用父类选择器限制激活样式只在指定布局生效：

1. 给各布局的根节点添加专属类名：

   <!-- LandingLayout.vue 根节点 -->
   <div class="landing-layout">
     <!-- 布局内容 -->
   </div>
   
   <!-- AdminLayout.vue 根节点 -->
   <div class="admin-layout">
     <!-- 布局内容 -->
   </div>
   

2. 全局样式里做区分：

   /* 仅Admin布局下的激活类生效 */
   .admin-layout .active,
   .app-layout .active {
     color: #1890ff;
     font-weight: 600;
     /* 其他激活样式 */
   }
   
   /* 落地页布局的激活类和普通链接样式保持一致 */
   .landing-layout .active {
     color: inherit;
     font-weight: normal;
   }
   

方案3：动态修改路由全局配置 #

在布局切换时动态修改激活类的全局配置，无需修改每个路由链接，修改App.vue的路由监听逻辑即可：

watch: {
  $route(to) {
    // 原有布局切换逻辑
    if (to.meta.layout !== undefined) {
      this.layout = to.meta.layout;
    } else {
      this.layout = "LandingLayout";
    }
    // 新增：动态切换激活类配置
    const needActiveClass = ["AppLayout", "AdminLayout"].includes(to.meta.layout);
    this.$router.options.linkExactActiveClass = needActiveClass ? "active" : "";
  },
},

内容的提问来源于stack exchange，提问作者Larra