Question

我有一个带有类别，子类别和产品的树形导航。我需要为类别和产品定义两条路线。可以有多个嵌套的子类别。

我想展示例如/category和/category/subcategory/subcategory/subcategory。

产品路线看起来像category/product/productslug或category/subcategory/subcategory/subcategory/product/productslug，其中product是特定产品标记之前的前缀。

在Laravel中，我做了这样的事情：

对于产品：

Route::get('/{category?}/product/{slug}', 'ProductController@getProductBySlug')->where('category', '.*');

对于类别：

Route::get('/{category?}', 'CategoryController@getCategoryBySlug')->where('category', '.*');

在Vue路由器中，这样的工作不起作用：

routes: [
 {path: '/', component: HomeView},
 {path: '*/product/:slugproduct', component: ProductView},
 {path: '*', component: CategoryView},
]

Answer 1

我为您创建了一个codepen，以测试您的任务的正确解决方案。现在，让我解释一下它是如何工作的。 Vue-Router具有神奇的正则表达式模式，这些模式可能很棒，更多信息on GitHub in path-to-regexp project。

只需将您的*更改为(.*)，就可以开始工作-即可。要从实际参数中获取模式组，您可以使用this.$route.params.pathMatch，它将包含当前的正则表达式组，路径中描述的其他命名参数也将具有实际名称-id，{{ 1}}等。

如您所见，我已经推送了一条自定义路由slug，控制台输出将如下所示：

/category/subcategory/subcategory/product/100

如您所见，我们拥有预期的正则表达式Vue mounted... Home component mounted... path: /category/subcategory/subcategory/product/100 tree: /category/subcategory/subcategory id: 100组和一个(.*)参数。

id

const Home = {
  data() {
    return { };
  },
  mounted() {
    console.log('Home component mounted...');
    console.log('path: ' + this.$route.path);
    console.log('tree: ' + this.$route.params.pathMatch);
    console.log('id: ' + this.$route.params.id);
  },
  template: `<div>Home component...</div>`
};

const router = new VueRouter({
  mode: 'hash',
  routes: [
    {
      path: '(.*)/product/:id',
      name: 'index',
      component: Home,
    }
  ]
})

const vm = new Vue({
  el: '#app',
  router,
  data: {},
  mounted() {
    console.log('Vue mounted...');
  }
})

router.push("/category/subcategory/subcategory/product/100");

VueJS-如何在Vue路由器中为任意数量的可选参数定义路由

1 个答案: