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

Question

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

我跟踪了本教程的上下文。我只想在特定的布局和页面上添加活动类。例如，我只需要管理布局导航中的活动类，而不是登陆页面布局导航中的活动类。我怎样才能做到这一点？

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";
        }
      },
    },

看到它的行动：

码箱链接