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-router

Vue 路由器 - 可选路由组

Vue router - optional route groups

vue.js

vue-router