Как исправить некорректное отображение слеша в url (vue router)?

Question

[Дарья Не важно]

Доброго времени суток
Столкнулась с проблемой суть такая:
С бэка приходит слаг , он нужен для динамичного роута
вот роут

{
    path: '/product/:slug/(.*)?',
    name: 'Product',
    params: true,
    component: () => import(/* webpackChunkName: "Category" */ '../views/ProductCard')
  },

пример слага
url:"best-of-june/flowers/9150"
но когда слаг вставляю в router link

<router-link :to="{name:'Product',  params: {slug: item.url }}</router-link>

на выходе url получаеться вот таким

http://sandbox/product/best-of-june%2Fflowers%2F9150

вместо / появляется %2F
как это можно исправить?

Comments

[Aetae]

Навскидку - ток юзать path прямо.

[Дарья Не важно]

Aetae, пробовала
с path все ок, но не могу указать какой компонент нужно рендерить при переходе

Answer 1

[Aetae]

Роутер экранироует все params, кроме специального исключения для *.

Если отдельный slug вам не очень нужен, то можно сделать так:

{
    path: '/product/*',
    name: 'Product',
    params: true,
    component: () => import(/* webpackChunkName: "Category" */ '../views/ProductCard')
 },

<router-link :to="{name:'Product',  params: {pathMatch: item.url}}</router-link>

Comments

[Дарья Не важно]

Подошел этот вариант
большое спасибо!
и спасибо отдельное за информацию про то что парамс экранирует