Vue Router produces a url with %2F for slug routes

Martin Zeltin 0
Viewed 16

In my Vue 3 app, I need to add a route for dynamic slugs. I have added a route for it but RouterLink produces a url that includes %2F where a slash should be. I don't want that. I want my url to include actual slashes inside my slugs.

This is what I am getting now: http://my.app/search/tool-based/1st-level%2F2nd-level%2F3rd-level

But I would like it to be this: http://my.app/search/tool-based/1st-level/2nd-level/3rd-level

My slugs are unknown in size. It could be as short as /category/another or it could be /category/another/another/another/another/another... so I cannot hard-code this - it needs to be dynamic.

Here is my route:

{
    path: '/search/tool-based/:slug(.*)',
    name: 'toolBasedSearch',
    component: () => import('@/views/tool-search/ToolBasedSearchView.vue'),
},

And here is my RouterLink (category.canonicalUrl comes from the database and it looks like category1/category2/category3...)

<template>
    <RouterLink
        v-for="category in categories"
        :to="{ name: 'toolBasedSearch', params: { slug: category.canonicalUrl } }"
        :key="category.uuid!">

        {{ category.namePlural }}
    </RouterLink>
</template>
vue-router vue.js javascript
1 Answers

Looks like I found a solution myself. I needed to create the route like this instead:

{
    path: '/search/tool-based/:slug+',
    name: 'toolBasedSearch',
    component: () => import('@/views/tool-search/ToolBasedSearchView.vue'),
},

and then pass an array to it like this by splitting my slug (creating an array):

<RouterLink
    v-for="category in categories"
    :to="{ name: 'toolBasedSearch', params: { slug: category.canonicalUrl.split('/') } }"
    :key="category.uuid!">

    {{ category.namePlural }}
</RouterLink>
Martin Zeltin0
Related