Vue-router: Allow props for every attribute in to on router-link (like name, params, query)

[Bigdragon13th]

What problem does this feature solve?

In my projects, I always link to the routes using route name (and also set it as a standard of my team). e.g.

<router-link :to="{ name: 'productList' }">Product List</router-link>
<router-link :to="{ name: 'productItem', params: { id: 1 }}">Product Detail</router-link>

I found this pattern is unnecessary too long and not convenient to use compare to a much shorter syntax of using route link

<router-link to="/products-list">Product List</router-link>
<router-link to="/products/1">Product Detail</router-link>

Anyway, I still want to use named route everywhere (for the sake of maintainability & scalability) and feel like link to named route can be improved.

What does the proposed API look like?

I want the :to to be able to link to named route as-is (so when we created a route object somewhere else, we can bind it easily). But maybe you can make another prop for named route, such as:

<router-link toName="productList">Product List</router-link>
<router-link toName="productItem" :params="{ id: 1 }">Product Detail</router-link>

Or (I don't know if it possible) custom modifiers?:

<router-link to.name="productList">Product List</router-link>
<router-link to.name="productItem" :params="{ id: 1 }">Product Detail</router-link>

[posva]

A modifier is indeed not possible. I think using the attribute name directly would make more sense

[oppianmatt]

You've got a small syntax error with your example (missing =), also see my now closed duplicate proposal format:

I would propose something like

<router-link to="productItem" :params="{ id: 1 }">Product Detail 1</router-link>

That keeps the to field backwards compatible but let you provide params and other parameters