Использование v-if для каждого дочернего маршрута в vue. js

Question

Я хотел бы показать определенный div для каждого дочернего маршрута. Поэтому я подумал, что простое добавление чего-то вроде этого будет работать, но это не так:

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

Так что любой маршрут, который вложен в / news / все еще не показывает, что <div>

Как отобразить этот div для каждого дочернего маршрута /news?

Answer 1

Использование Vue Вложенные маршруты :

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>

Answer 2

Так что на самом деле это будет работать, если я установлю v-if="$route.path.includes('/news/')", поэтому div показывает только в дочерних маршрутах (не в родительских).