为 Vue.js 中的子页面设置路由器

Question

我想知道如何最好地在 Vue.js 中设置路由器来处理“子页面”。例如，我有一个路由到不同页面的导航栏。从这些页面之一，我想要 links 到子页面。我如何最好地设置它？

到目前为止我是这样做的：

App.js

<template>
  <div id="app">
    <div id="nav">
      <router-link to="/">Home</router-link> |
      <router-link to="/about">About</router-link>
    </div>
    <router-view />
  </div>
</template>

然后我设置我的路由器：

export default new Router({
  routes: [
    {
      path: "/",
      name: "home",
      component: Home
    },
    {
      path: "/about",
      name: "about",
      component: About,
      children: [
        {
          path: "/child1",
          name: "child1",
          component: Child1
        }
      ]
    }
  ]
})

还有我的 About.vue，我向 Child1

提供了 link

<template>
  <div class="about">
    <h1>This is an about page</h1>
    <router-link to="/child1">Child1</router-link>
    <router-view></router-view>
  </div>
</template>

最后是我的Child1.vue

<template>
  <div class="child1">
    <p>My message</p>
  </div>
</template>

我的问题是 Child1 的 link 显示在关于页面和 Child1 页面上。我只想在关于页面上显示它，并且只在 Child1 页面上显示来自 Child1 的内容

这样设置的最佳做法是什么？

谢谢

Answer 1

My problem is that the link to Child1 is displayed both on the About page and on Child1 page. I just want to display it on the about page

只是为了澄清这里发生的事情：即使子路由处于活动状态，到 Child1 的 link 在 About 组件中始终可见，但您不想显示 link子路由处于活动状态。

方式一

当没有匹配的路由时（即没有子路由处于活动状态时），您可以向 <router-view> 提供后备内容。这将是展示 link.

的好机会

<template>
  <div class="about">
    <h1>This is an about page</h1>
    <router-view>
      <router-link to="/child1">Child1</router-link>
    </router-view>
  </div>
</template>

方式二

如果您的模板更复杂并且您想将 link 放在模板的其他位置，上述解决方案可能不起作用。

因此您必须使用 v-if 手动控制 link 的可见性，以便它仅在子路由未激活时可见。

<template>
  <div class="about">
    <h1>This is an about page</h1>

    <!-- Show only when no child routes are active -->
    <router-link v-if="$route.name === 'about'" to="/child1">Child1</router-link>

    <!-- Or, do not show when Child1 route is active -->
    <router-link v-if="$route.name !== 'child1'" to="/child1">Child1</router-link>

    <router-view></router-view>
  </div>
</template>

为 Vue.js 中的子页面设置路由器

Set up router for subpages in Vue.js

router

vue.js