Vue-router: Add the ability to pass custom data using v-link

[levani]

Here is a simple example:

I have a list of articles. When I click on a particular item I'm going on a new page that displays the full article. Since I already know the title of the article I want to display that data on single article page instantly and fetch other data from server (full content, comments, etc). I may be missing something but I think there is no elegant way to do this in vue now.

There should be a way to pass some custom data like this, (note the data property):

<ul id="articles">
    <li v-for="article in articles">
        <div class="title" v-link="{ path: '/article/' + article.id,
            data: {title: article.title} }">{{ article.title }}</div>
    </li>
</ul>

then I should receive this data in a component responsible for /article/:id page, inside data object for example.

This is a temporary data and it should be ok if it's not present at all. For example when directly opening the link it will not be present. In that case all data must be fetched from server.

[rmaksim]

Also interested in the issue.
For example, in the address bar, I want to see a nice URL, and send the requested id in the component.

< a class="title"
v-link="{ path: '/article/' + article.nice_url, data: {id: article.id} }" > {{ article.title }} < /a >

yes, we can do named route
< a class="title"
v-link="{ name: 'article', params: {url: article.nice_url}" > {{ article.title }} < /a >

but where put the id?

[fnlctrl]

Duplicate of #444 and #457, it is simply not possible.

What Evan You said:

what you are trying to "pass along" is not a URL param, but rather application state. A URL param is by definition part of the URL. You are actually trying to do two things: 1. navigate to the route 2. mutate the application state (pageType).

[rmaksim]

@fnlctrl, How about a custom fields? (doc)
We can set them on the route, right?
Why not use dynamic custom fields from v-link?
It will be the same, no?

[LinusBorg]

This is simply not the job of the router.

the router's job is to switch components according to the URL, and provide data from the URL to these components. that's it.

It should not be concerned about application state, because ideally, you can have users go to any route by directly typing it in their browser, and get the same result. That can not be consistently achieved if routes depended on application state in the way you want them to.

If there is a situation where you need to do this, use a store object, or save it in the main instance, or use vuex, or save it to localStorage.

There are many ways to make state avaliable to other components. And things like these should not be the job of the router.

[rmaksim]

you can have users go to any route by directly typing it in their browser, and get the same result

@LinusBorg, ok ;)

I decided my problem with the following code

var router_map = { /* some other routes */ }
menus.forEach(function (menu) {
    router_map["/menu/"+menu.nice_url] = { component: Menu, menu_id: menu.id }
})
router.map(router_map)

I'm sorry, this is not the topic of this issue , but ...
Maybe it can be made more beautiful?

[LinusBorg]

Please ask usage questions like this on the forum or on gitter.