Как создать динамические пути Vue?

Question

[geometria]

Сейчас у меня на сайте находится порядка 100 роутов примерно такого вида:

/*app.js*/
{ 
      path: '/Телефон-Самсунг',
      name: 'phone_samsung',
      component: 'phone_samsung',
    },
{ 
      path: '/Телефон-Ксяоми',
      name: 'phone_xiaomi',
      component: 'phone_xiaomi',
    },
/************************************************/

Эти компоненты импортируют в себя шаблон (shablon.vue), и подставляя параметр product.id, отрисовывают страницу продукта.

Переход по роутам в app.js осуществляется со стартовой примерно так:

<div class="col-md-4">
       <router-link :to = "{name: product.ru_caption}" >
       <img :src="product.picture" :alt="product.name">
       </router-link>
     </div>

Вопрос-задача: как мне прописать в app.js динамический роут такого вида, передав сегмент "product.ru_caption":

{ path: '/:product.ru_caption', component: shablon},

Answer 1

[Alex]

Параметры для динамических путей можно указывать так:
<router-link :to = "{name: '', params: {}}" >

Например:

// router.js
{
  name: 'product'
  path: '/:model'
}

// component.vue
<router-link :to = "{
  name: 'product', 
  params: {
    model: 'Телефон-Самсунг'
  }
}" >