Vue-router: Expose a way to get a route as string.

[gregtap]

There are cases where one can wish to display the actual href or even pre-compute the href before passing it as a component property with some extra text.

The _stringifyPath method https://github.com/vuejs/vue-router/blob/dev/src/index.js#L570 does work but is private.

A an example we have a simple Notification component that accepts a text, type and delay. We want to keep it dumb and only show what is in its text property.

[tejitak]

Hi @coulix ,
I'm not sure why exposing method is needed in this your example case.
Could you please provide a bit more explanation?

[gregtap]

Lets say you are building a simple notification system.

mixin

import store from '../store';

const notificationMixin = {
  methods: {
    $info(text, options = {}) {
      store.dispatch('ADD_NOTIFICATION', Object.assign({
        text,
        type: 'info',
        timeout: true,
        delay: 10000,
      }, options));
    },`
    ...
}

Now in your component you trigger this notification with.

this.$info('Hey visit this link <a href=""></a>');

I want to include a vue router URL in my text parameter. Keeping notifications simple and text based.
I could of course build the URL by hand but I would rather leverage my router configuration.

      const url = getRouter()._stringifyPath({ name: 'inbox', query: { filter: 'archived' }});
      this.$info(`Message archived. <a class="link" href="${url}">View Archive</a>.`);

[tejitak]

Thanks. I see this is a case building a URL string from v-link parameters not for current route.
@yyx990803 What do you think of making the method stringifyPath public.

[yyx990803]

@tejitak the public method should probably just be router.getPath() which calls this._stringifyPath(this._currentRoute)

[tejitak]

Hi @yyx990803 ,
router.getPath() sounds like returning a path of a current route.
The requirement above is building a path from a v-link path parameter (It's more like a utility method)

How about moving the method to util as util.stringifyPath?
To use it,
import { stringifyPath } from 'vue-router/src/util' or maybe expose as $router.util?

[yyx990803]

well I guess we can just expose router.stringifyPath then...

[grinry]

Does router.stringifyPath available in v2? Doesn't look like working to me.

[fnlctrl]

@kiberzauras It's now router.resolve()
http://router.vuejs.org/en/api/router-instance.html

[dann95]

@fnlctrl do the router.resolve has a full url property? for like idk something i must force user to copy and not click? the resolve works perfect!, but it dosnt generates full url. 👍

[prigaux]

For the record, to get full url:

const a = document.createElement('a');
a.href = this.$router.resolve(location).href;
return a.href;

NB: edited (simplified thanks to RomainFrancony)

[RomainFrancony]

@prigaux why not just return a.href ? It's easier and will keep the query string.

[stevenspinoza]

I'll digest the solution for you (inside a component, pun intended):

this.$router.resolve({ name: 'your_route_name', params: { id: item.id } })

Then, you can access the route object and choose the string property you need