CODEWITHSUNDEEP
vue.jsvue-router
Lex Webb
Lex Webb

Reputation: 2852

Custom handling forward slashes in vue router ids

I have a use case for needing the id part of a vue route to contain unescaped forward slashes.

My current route looks like this:

{
    path: '/browse/:path*',
    component: browse,
    name: 'browse',
    displayName: 'Browse',
    meta: { title: 'Browse' },
},

So when a user browses to the above url, the browse component is shown.

However, i want to use the id part of the path (:path*) to contain a nestable fielsystem like path to be consumed by my browse page.

For example the url /browse/project/project1 would take me two levels down in my tree to the project1 item.

Now, the problem i'm running into is that vue router is escaping my ids (path) when navigating programatically, and my url ends up like this: /browse/project%2Fproject1. This is non-ideal and does not look nice to the end user. Also, if the user does browse to /browse/project/project1 manually the app will work correctly and even keep the original encoding in the url bar.

So i could resolve this my making an arbitrary number of child paths and hope that the system never goes over these, but thats not a good way to solve my problem.

I should also clarify that the application will not know anything about the path after /browse as this is generated dynamically by the api that powers the app.

Is there a native way in vue-router to handale this? or should i change up how im doing things.

Upvotes: 3

Views: 4944

Answers (4)

vitalh
vitalh

Reputation: 434

There is a more elegant solution without workarounds.

Vue router uses path-to-regexp module under the hood and constructions like

const regexp = pathToRegexp('/browse/:path*')
// keys = [{ name: 'browse', delimiter: '/', optional: true, repeat: true }]

https://github.com/pillarjs/path-to-regexp#zero-or-more

const regexp = pathToRegexp('/browse/:path+')
// keys = [{ name: 'browse', delimiter: '/', optional: false, repeat: true }]

https://github.com/pillarjs/path-to-regexp#one-or-more

set repeat flag to true. Any array parameter with repeat flag will be joined with the delimiter (default '/').

So you can pass a splitted array ['project','project1'] instead of 'project/project1' into router.push():

router.push( {name: 'browse', params: {path: ['project','project1']}} );

or 

router.push( {name: 'browse', params: {path: 'project/project1'.split('/')}} );

Upvotes: 7

PayteR
PayteR

Reputation: 1757

I fixed it by creating helpers for generating hrefs for :to attributes of vue router link.

First i made router accessible for my new helper service like here Access router instance from my service

Then i created router-helpers.js and here i made my helpers, here is an example

import Vue from 'vue'
import router from '../router.js'

// replace %2F in link by /
const hrefFixes = function(to) {
  return to.replace(/%2F/g, '/')
}

// my link helper
Vue.prototype.$linkExample = attr => {
  // create "to" object for router resolve
  const to = { name: `route-name`, params: { param1: attr } }

  // this will resolve "to" object, return href param as string
  // and then i can replace %2F in that string
  return hrefFixes(router.resolve(to).href)
}

Just include this service once in your Vue application an then just use this helper like this

<router-link :to="$linkExample(attr)">text</router-link>

Upvotes: 0

Lex Webb
Lex Webb

Reputation: 2852

So I managed to 'fix' this with a bit of a hack.

When creating my Vue router instance I am attaching a beforeEach function to replace any outgoing encodings of '/'. This will send the 'correct' URL I am looking for to the client.

const router = new Router({
    mode: 'history',
    routes,
});

router.beforeEach((to, from, next) => {
    // hack to allow for forward slashes in path ids
    if (to.fullPath.includes('%2F')) {
        next(to.fullPath.replace('%2F', '/'));
    }
    next();
});

Upvotes: 2

i_deologic
i_deologic

Reputation: 23

I just stumbled over your question while facing a similiar problem.

Think this is because an id shall identify one single resource and not a nested structure/path to a resource.

Though I haven't solve my problem yet, what you probably want to use is a customQueryString:

https://router.vuejs.org/api/#parsequery-stringifyquery

https://discourse.algolia.com/t/active-url-with-vue-router-for-facet-and-queries/3399

Upvotes: 0

Related Questions