Vue router - optional route groups

Question

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!

yes, I checked the docs, I also checked the examples on github, but they don't really answer my question. Could you give me an example or point me in to the right direction? — Paulius Krutkis

ABDEL-RHMAN ABDEL-RHMAN · Accepted Answer · 2016-10-03T12:06:49

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

Vue router - optional route groups

1 Answers