Question

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

到目前为止，我已经做到了：

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的链接

<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”页面上都显示了指向Child1的链接。我只想在About页面上显示它，而只在Child1页面上显示Child1的内容

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

谢谢

Answer 1

我的问题是，在“关于”页面和“ Child1”页面上都显示了指向Child1的链接。我只想在“关于”页面上显示它

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

方法1

当没有匹配的路由时（即，没有子路由处于活动状态时），您可以向<router-view>提供备用内容。这将是显示链接的好机会。

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

方法2

如果您的模板更加复杂，并且您希望将链接放置在模板中的其他位置，则上述解决方案可能不起作用。

因此，您必须使用v-if手动控制链接的可见性，以便仅在子路由不活动时才可见。

<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中为子页面设置路由器

1 个答案: