title: VueJS - How to define routes for any number of optional parameters in Vue Router
body: <p>I a have tree navigation with categories, subcategories and products. I need to define two routes, for categories and for product. There can be multiple nested subcategories.</p>
  
  <p>I wanna show the same component for e.g. <code>/category</code> and <code>/category/subcategory/subcategory/subcategory</code> as well.</p>
  
  <p>Product route will looks like <code>category/product/productslug</code> or <code>category/subcategory/subcategory/subcategory/product/productslug</code> where <code>product</code> is prefix before specific product slug.</p>
  
  <p>In Laravel I did something like this:</p>
  
  <p>For Product:</p>
  
  <pre><code>Route::get('/{category?}/product/{slug}', 'ProductController@getProductBySlug')-&gt;where('category', '.*');
  </code></pre>
  
  <p>For Category:</p>
  
  <pre><code>Route::get('/{category?}', 'CategoryController@getCategoryBySlug')-&gt;where('category', '.*');
  </code></pre>
  
  <p>In Vue Router doesn't work smth like this:</p>
  
  <pre><code>routes: [
   {path: '/', component: HomeView},
   {path: '*/product/:slugproduct', component: ProductView},
   {path: '*', component: CategoryView},
  ]
  </code></pre>