对 vue.js 中的每个子路由使用 v-if答案

【问题标题】：Using v-if for every children route in vue.js对 vue.js 中的每个子路由使用 v-if
【发布时间】：2020-06-05 20:38:33
【问题描述】：

我想为路线的每个子路线显示一个特定的 div 所以我认为简单地添加这样的东西就可以了，但它没有：

<div v-if="$route.path == '/news/:child'">
</div>

所以任何嵌套在 /news/ 下的路由仍然不会显示 <div>

如何为/news 路由的每个子路由显示该 div？

【问题讨论】：

$route.path.includes('/news')
see 然后检查是否等于/news
@ReeceWard 但是如果我没有错，您的解决方案也会显示父路由的 div 吗？我只希望这个 div 用于嵌套路由。

标签： vue.js vuejs2 vue-router

【解决方案1】：

使用Vue Nested Routes:

const routes = [
  {
    path: '/news',
    component: NewsComponent,
    children: [
      {
        path: ':child',
        component: ChildComponent,
      },
    ]
  }
]
    
// NewsComponent
<template>
  <div>
    My News Component
    <router-view />
  </div>
</template>

// ChildComponent
<template>
  <div>
    My Child Component
  </div
</template>

将呈现：

<div>
  My News Component
  <div>
    My Child Component
  </div>
</div>

【讨论】：

【解决方案2】：

所以实际上，如果我设置v-if="$route.path.includes('/news/')"，这将起作用，因此 div 仅显示在子路由中（不在父路由中）。

【讨论】：