Vue Router generates a URL containing %2F when dealing with slug routes

Question

Vue Router generates a URL containing %2F when dealing with slug routes

I am facing an issue in my Vue 3 application where I need to create a route for dynamic slugs. Currently, when using RouterLink, the generated URL contains %2F instead of actual slashes which is not the desired result.

For example, the current URL looks like this:

http://my.app/search/tool-based/1st-level%2F2nd-level%2F3rd-level

However, I want it to look like this:

http://my.app/search/tool-based/1st-level/2nd-level/3rd-level

Since the size of my slugs can vary and are unknown, hard-coding them is not a feasible solution as they could range from something short like /category/another to extended paths such as

/category/another/another/another/another/another...

.

Below is my route configuration:

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

Additionally, here is how I am using RouterLink (category.canonicalUrl retrieved from the database appears in the format of category1/category2/category3...):

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

        {{ category.namePlural }}
    </RouterLink>
</template>

javascript vue.js vue-router

Answer 1

Answer №1

After some trial and error, I managed to come up with a solution on my own. The key was adjusting the route configuration as follows:

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

Then, I needed to pass an array by splitting my slug into parts like this:

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

    {{ category.namePlural }}
</RouterLink>

Answer 2

After some trial and error, I managed to come up with a solution on my own. The key was adjusting the route configuration as follows:

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

Then, I needed to pass an array by splitting my slug into parts like this:

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

    {{ category.namePlural }}
</RouterLink>

Vue Router generates a URL containing %2F when dealing with slug routes

Answer №1

Similar questions

Saving the index.html file to disk when the button is clicked

When attempting to add a new row to a table, the function fails to function properly

AngularJS enables box to smoothly slide up and down when hovered over

Error message encountered: "myData undefined while executing server in Node.js"

What steps are necessary to activate javascript in HTML for WebView?

What is the best way to spy on a property being called within a function?

Is it possible to establish role-based access permissions once logged in using Angular 6?

Maintain an equal distance between 2 out of 3 elements while resizing the window to ensure responsiveness

Leveraging AJAX and jQuery for data storage

The issue arises due to conflicting indent configurations between eslint and @typescript-eslint/indent

The swf file doesn't stretch to fit the window when the height is set to 100%

What is the best way to customize the active class of a v-btn in Vuetify?

Trouble accessing Silverlight site due to incomplete loading

What is the best way to create a self-referencing <div> in HTML?

How to transform multi-dimensional arrays to JSON format using JavaScript (and maybe jQuery)

Maintaining form data while dynamically including more instances of a <div> element to the form

Error: Node-Sass - Unable to download win32-x64-57_binding.node

Using JavaScript to retrieve data from a JSON file and showcase it on a jQuery mobile webpage

Utilizing JSON File as an Array in a Node.JS Environment

Troubleshooting problem with rotation and text geometry label on AxisHelper