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

"Successful implementation of Ajax function in local environment but encountering issues when running online

I am encountering an issue where I am sending an AJAX request to a PHP file with the datatype set as JSONP, but I

Utilize the input field value in an HTML dialog box to assign it to a variable in the code.gs file with the help

Can an AJAX upload progress bar be implemented in Internet Explorer without using Flash?

Step-by-Step Guide on Resetting Versions in Package.json

Turning a JavaScript function into jQuery

Error Encountered: Unhandled Runtime Error in Next.js with Firebase - TypeError: Unable to access the property 'initializeApp' as it is undefined

Firefox Issue: SetTimeout Redirect Function Not Functioning Properly

Issue with React-select: custom Control prevents select components from rendering

Quick Validator. Establishing a schema that relies on specific values

Comparing parameters between two functions in Javascript: a step-by-step guide

Retrieve the latest inserted ID in a Node.js application and use it as a parameter in a subsequent query

Attempting to limit entry to a pathway when the loggedIn criterion is satisfied

What is the best way to add up the attributes of objects within an array and save the total to the main

My divs are multiplying twice as fast with every iteration of the Javascript For Loop

Watcher doesn't detect modifications in array values

Removing connected entries with pre middleware on mongoose

Unable to make changes to a file authored by a different user within Firestore using Vue.js / Firestore

What is the best way to sum up multiple checkbox values in JavaScript?

When integrating string variables into JavaScript regular expressions in Qualtrics, they seem to mysteriously vanish