VueJS - Как определить маршруты для любого количества дополнительных параметров в Vue Router - PullRequest
Новая
       8

VueJS - Как определить маршруты для любого количества дополнительных параметров в Vue Router

0 голосов
/ 24 января 2019

У меня есть дерево навигации с категориями, подкатегориями и продуктами. Мне нужно определить два маршрута, для категорий и для продукта. Может быть несколько вложенных подкатегорий.

Я хочу показать тот же компонент, например, /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 Router не работает что-то вроде этого: 

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

1 Ответ

0 голосов
/ 27 января 2019

Я создал codepen , чтобы вы могли проверить правильное решение своей задачи.Теперь позвольте мне объяснить, как это работает.У Vue-Router есть волшебные шаблоны reg-exp, которые могут быть потрясающими, больше информации на GitHub в проекте path-to-regexp .

Просто измените ваш * на (.*) и здесьтвой ход - просто работает.Чтобы получить группу шаблонов из фактических параметров, вы можете использовать this.$route.params.pathMatch, который будет содержать текущую группу reg-exp, другие именованные параметры, которые были описаны в вашем пути, будут доступны с фактическими именами - id, slug и т. Д.

Как видите, я выдвинул пользовательский маршрут /category/subcategory/subcategory/product/100, и вывод консоли будет выглядеть следующим образом: 

Vue mounted...
Home component mounted...
path: /category/subcategory/subcategory/product/100
tree: /category/subcategory/subcategory
id: 100

Как вы можете видеть, у нас есть группа reg-exp (.*) какожидается и id param. 

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");
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue-router/3.0.2/vue-router.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.22/vue.min.js"></script>
<div id="app">
  <router-view></router-view>
</div>
...