vue.js - 仅在特定布局和页面中添加 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");

路由.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" },
  },
];

应用程序.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>

任何帮助将非常感激。

标签： vue.jsvue-routervuejs3

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

看看它的实际效果：

代码沙盒链接