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

Answer 2

您可以在同一路线中拥有多个动态细分。

const router = new VueRouter({
routes: [
    // dynamic segments start with a colon
    { 
      path: 'blog/category/:category_value/page/:page_value', 
      component: Blog 
    },
    { 
      path: 'blog/category/:category_value/tags/:tags_value/page/:page_value', 
      component: Blog 
    }
  ]
})

根据您的要求，您可以拥有类似的路线模式。

现在，当您访问以下页面时，例如：example.com/blog/category/：category_value / page /：page_value ：category_value和：page_value分别在$ route.params.category_value和$ route.params.page_value中可用。

请参阅此处的文档：https://router.vuejs.org/en/essentials/dynamic-matching.html

Vue路由器 - 可选路由组

2 个答案: