CODEWITHSUNDEEP
vue.jsvue-router
Paulius Krutkis
Paulius Krutkis

Reputation: 53

Vue router - optional route groups

I have a question about vue-router. How could I accomplish a route / routes like this: 

example.com/blog/category/value/tags/value/page/value

Category, tags and page should be optional.

So if I visit example.com/blog/category/value/page/value - it should load the same component.

I'm using vue 2.

Thanks!

Upvotes: 1

Views: 2364

Answers (1)

ABDEL-RHMAN
ABDEL-RHMAN

Reputation: 3014

try this

const Blog = {
  template: `<div>Blog 
    <h3>{{  $route.params.category }}  {{  $route.params.page }}</h3>
  </div>`
};

const router = new VueRouter({
  routes: [
    { path: '/blog(/category/)?:category([^\/]+)?(/page/)?:page?', component: Blog }
  ]
});

const app = new Vue({ router }).$mount('#app');

html:

<div id="app">
    <p>
       <router-link to="/blog">blog</router-link>
       <router-link to="/blog/category/cat1/page/page1">/blog/link1</router-link>
       <router-link to="/blog/category/cat2/page/page2">/blog/link2</router-link>
    </p>
      <router-view></router-view>
</div>

Vue-router

Upvotes: 2

Related Questions