How to fix incorrect display of slash in url (vue router)?

Question

Vue.js

Good day I
ran into a problem, the essence is this:
A slug comes from the back, it is needed for a dynamic route
, here is the route

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

example of a slug but when I insert the slug into the router link
url:"best-of-june/flowers/9150"

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

the output url looks like this

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

instead of / appears %2F
how can I fix this?

Answer 1

The router will escape everything paramsexcept a special exception for *.
If slugyou do not really need a separate one, then you can do this:

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

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