javascript - VueJS 3 - 类不适用于以相同路径名开头的路由

Question

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

我遇到的问题是，每当我单击第 4 个链接时，该链接也在路由器对象的 ROOT 级别上声明，以与当前事件链接相同的路径名开始，<router-link-active>类(Class)灾难。例如

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

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

Codesandbox

App.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 {
  color: #f1a80a;
  border-color: #f1a80a;
  background-color: #1a037e;
}
</style>

主要.js

import App from "./App.vue";
import router from "./router.js";

const app = createApp(App);

app.use(router);

app.mount("#app");

路由器.js

import { createRouter, createWebHistory } from "vue-router";
import link1 from "./components/link1.vue";
import link2 from "./components/link2.vue";
import sibling from "./components/sibling.vue";
import link3 from "./components/link3.vue";

const router = createRouter({
  history: createWebHistory(),
  routes: [
    { path: "/", component: link1 },
    { path: "/link2", component: link2 },
    { path: "/link2/sibling", component: sibling },
    { path: "/link3", component: link3 }
  ]
});

export default router;

link1.vue

<template>
  <div>You are inside Link1</div>
</template>

link2.vue

<template>
  <div>
    <router-link to="/link2/sibling">
      You are inside Link 2 (CLICK ME)
    </router-link>
  </div>
</template>

link3.vue

<template>
  <div>You are inside Link 3</div>
</template>

兄弟.vue

<template>
  <div>You are inside Link2 sibling</div>
</template>

Answer 1

我认为这是我们期望路由的自然行为。当你点击 You are inside Link 2 (CLICK ME)里面link2.vue组件，vue-router负载 sibling.vue在router-view参与你的App.vue .所以没有You are inside Link 2 (CLICK ME)该 View 中的链接以查看 router-link-active样式。如果你想看到那些样式，你必须在 View 中保留你的链接并且不允许 vue-router让它消失。

为了实现这样的目标，您可以使用 Nested Routes在 vue-router像这样。首先将您的 router.js 文件更改为如下内容:

import { createRouter, createWebHistory } from "vue-router";
import link1 from "./components/link1.vue";
import link2 from "./components/link2.vue";
import sibling from "./components/sibling.vue";
import link3 from "./components/link3.vue";

const router = createRouter({
  history: createWebHistory(),
  routes: [
    { path: "/", component: link1 },
    { 
        path: "/link2",
        component: link2,
        children: [
            {
              path: 'sibling',
              component: sibling
            },
          ]
    },
//    { path: "/link2/sibling", component: sibling
//        
//    },
    { path: "/link3", component: link3 }
  ]
});

export default router;

然后添加一个<router-view>给你的link2.vue像这样的文件:

<template>
  <div>
    <router-link to="/link2/sibling">
      You are inside Link 2 (CLICK ME)
    </router-link>
    <router-view></router-view>
  </div>
</template>