CODEWITHSUNDEEP
javascriptvue.jsvue-router
Too
Too

Reputation: 727

vue-router – check if child of specific subroute

Checked similar questions on stackoverflow but couldn't find a working solution.

I want to check if a subroute is the child of a specific route to display a container (or not).

The following doesn't work unfortunately:

<div v-if="this.$route.matched.some(route => route.path === '/projects')">
   etc.
</div>

I'm trying to display the div container on www.example.com/projects AND on www.example.com/projects/foo

I also tried omitting the this.

Thanks for any tips!

Upvotes: 1

Views: 3445

Answers (3)

ctm
ctm

Reputation: 79

You can use

<div v-if="this.$route.matched.some(route => route.path.includes('/projects'))">
   etc.
</div>

includes() method determines whether an array includes a certain value among its entries, returning true or false as appropriate so www.example.com/projects/foo and www.example.com/projects return true

Upvotes: 3

laurisstepanovs
laurisstepanovs

Reputation: 536

If I need to hide some div in one of the paths I am using this.$route.path property.

<div v-if="this.$route.path === '/projects'">
  Display only on views witch route is /projects
</div>

If you want to hide div in all paths which contains '/projects' you can make it in this way.

<div v-if="this.$route.path.indexOf('/projects') >= 0">
  Display only on views which contains /projects
</div>

Upvotes: 1

ybenhssaien
ybenhssaien

Reputation: 4115

The best thing is to check on the name of the route

['route1', 'subroute1'].indexOf($route.name) >= 0

Upvotes: 1

Related Questions