CODEWITHSUNDEEP
vue.jsvuejs2vue-router
Kamil N.
Kamil N.

Reputation: 91

Vue router trouble with nested route

Long story short, I want to implement following routes:

So when user enters /blog, the list of articles is being presented. When user enters /blog/:category?... the list of articles with filters is being presented and when user enters /blog/article/:slug then details of article are being presented.

First two routes are using Blog component, and the 3rd one is using BlogPost component. Everything works fine when I click on the url http://localhost/blog/article/slug_of_article, but when I paste it in the url address the page is rendered with blog component as if the url was parsed by the Blog route, not the BlogPost route.

Below is a snippet of my router config:

{path: '/blog/:category?/:search?/:page?', name: "blog", component: Blog},
{path: '/blog/article/:slug', name: "blogPost", component: BlogPost}

What should I do to make it work the way I want?

Upvotes: 0

Views: 474

Answers (1)

yuriy636
yuriy636

Reputation: 11681

Because

/blog/article/slug_of_article can match both

/blog/:category?/:search?/:page? and

/blog/article/:slug routes, you have to tell the router which one you prefer to match first.

The match priority is set by definition order, so the earlier route will match first:

{path: '/blog/article/:slug', name: "blogPost", component: BlogPost},
{path: '/blog/:category?/:search?/:page?', name: "blog", component: Blog},

Upvotes: 1

Related Questions