仅在特定布局和页面中添加 linkExactActiveClass

Question

我对 Vue 比较陌生。我的应用程序有多个布局，但只有一个路由器。

我关注了 this tutorial 的上下文。我只想在特定布局和页面上添加 active 类。例如，我只想在管理布局导航上激活类，而不是在着陆页布局导航上。我该如何实现？

main.js

import { createApp } from "vue";
import App from "./App.vue";
import { routes } from "./routes.js";
import { createRouter, createWebHistory } from "vue-router";

const app = createApp(App);

const router = createRouter({
  history: createWebHistory(),
  routes,
  linkExactActiveClass: "active",
});

app.use(router);
app.mount("#app");

routes.js

import Home from "./views/Home.vue";

import Dashboard from "./views/app/Dashboard.vue";

export const routes = [
  {
    path: "/",
    component: Home,
    meta: { layout: "LandingLayout", title: "Home" },
  },
  {
    path: "/user",
    component: Dashboard,
    meta: { layout: "AppLayout", title: "Dashboard" },
  },
];

App.vue

<template>
  <component :is="layout" />
</template>

<script>
import LandingLayout from "@/layouts/LandingLayout.vue";
import AdminLayout from "@/layouts/AdminLayout.vue";

export default {
  components: {
    LandingLayout,
    AdminLayout,
  },
  data() {
    return {
      layout: null,
    };
  },
  watch: {
    $route(to) {
      if (to.meta.layout !== undefined) {
        this.layout = to.meta.layout;
      } else {
        this.layout = "LandingLayout";
      }
    },
  },
};
</script>

如有任何帮助，我们将不胜感激。

Answer 1

你们非常接近。您唯一忘记的是通过像这样提供它来立即进行路由监视：

  watch: {
    $route: {
      immediate: true,
      handler(to) {
        if (to.meta?.layout) {
          this.layout = to.meta.layout;
        } else {
          this.layout = "LandingLayout";
        }
      },
    },
  },

然后您可以像这样动态更改 this.$router.options.linkExactActiveClass 选项：

$route: {
      immediate: true,
      handler(to) {
        if (to.meta?.layout) {
          this.layout = to.meta.layout;
          this.$router.options.linkExactActiveClass = `my-active-link-other-layout`;
        } else {
          this.layout = "LandingLayout";
          this.$router.options.linkExactActiveClass =
            "my-active-link-landing-layout";
        }
      },
    },

查看实际效果：

仅在特定布局和页面中添加 linkExactActiveClass

Only add linkExactActiveClass in specific layout and page

vue.js

vue-router

vuejs3

Codesandbox link