Multi tool use

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.

:path*

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

/browse/project/project1

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.

/browse/project%2Fproject1

/browse/project/project1

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.

/browse

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

2 Answers
2

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

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.

beforeEach

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();
});


By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.