小编bab*_*s95的帖子

我创建了一个简单的 navar，其中有 3 个链接。所有链接均在路由器对象的 ROOT 级别声明。我添加了一个针对<router-link-active>导航栏上突出显示活动链接的类的简单样式。这一切都工作正常，在链接之间切换会更新 URL、更改<router-view>以及将正确的样式应用于当前的导航栏链接。

我遇到的问题是，每当我单击也在路由器对象的根级别上声明的第四个链接时，从与当前活动链接相同的路径名开始，类<router-link-active>灾难。例如

{ path: "/link2", component: link2 },
{ path: "/link2/sibling", component: sibling },

我的理解是，因为/links2/sibling与 开头同名/link2，导航到的导航栏项目/link2仍应具有该类<router-link-active>，即使 是/link2/sibling当前活动的 URL。

代码沙箱

应用程序.vue

<template>
  <div>
    <ul class="flex gap-x-5">
      <router-link to="/">
        <li>Link 1</li>
      </router-link>
      <router-link to="/link2">
        <li>Link 2</li>
      </router-link>
      <router-link to="/link3">
        <li>Link 3</li>
      </router-link>
    </ul>
  </div>
  <router-view />
</template>

<script>
export default {
  name: "App",
};
</script>

<style>
a:hover,
a:active,
a.router-link-active { …

我被这个问题困扰了一段时间，网上没有任何信息。使用 vue 3

• 我在路由器meta:标签内定义了一个布局组件。

• 在我的内部App.vue，我检查指定的路线是否具有布局元标记，如果有，则 `component :is="layout" 为 true。

应用程序.vue

<template>
  <component :is="layout">
    <router-view />
  </component>
</template>

<script>
  computed: {
    layout() {
      let layout = null;
      for (const match of this.$route.matched)
        if (match.meta && match.meta.layout) layout = match.meta.layout;
      if (layout) return layout;
      return "div";
    },
}
</script>

路由器.vue

const usLayout = () => import("../layouts/usLayout.vue");

    {
      path: "/",
      name: "us",
      component: GenericRouterView,
      meta: { layout: usLayout },
      children: usRoutes,
    },

我收到此错误：

[Vue warn]: 无效的 VNode 类型: 未定义 …