vue.js - Vue 路由器 - 可选路由组

Question

我有一个关于 vue-router 的问题。我怎么能完成这样的路线/路线：

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

类别、标签和页面应该是可选的。

所以如果我访问 example.com/blog/category/value/page/value- 它应该加载相同的组件。

我正在使用 vue 2。

谢谢！

Answer 1

尝试这个

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路由器