CODEWITHSUNDEEP
vue.jsvuejs2vue-router
Alex T
Alex T

Reputation: 3764

Using v-if for every children route in vue.js

I would like to show a certain div for every child route of the route So I thought simply adding something like this would work, but it does not:

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

So any route that is nested under /news/ still does not show that <div>

How can I display that div for every child route of the /news route?

Upvotes: 1

Views: 852

Answers (2)

Murilo Parente
Murilo Parente

Reputation: 16

Use 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>

Will render:

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

Upvotes: 0

Alex T
Alex T

Reputation: 3764

So actually this will work if I set v-if="$route.path.includes('/news/')", thus div only shows in children routes (not in parent).

Upvotes: 1

Related Questions