Add named routes

[Haberkamp]

The official router for Vue.js has a feature called "Named routes". It makes it possible to give the routes a separate name to refer to them instead of using the actual route. The benefit of this is that you can rename the route inside the config file but not where it has been referenced.

This feature would be a great addition.

[ryansolid]

Yeah I've used this approach in the past in older routers I've written. The only thing is then I think <Link> components would have to be work differently too since we just take a href currently so naming doesn't really have a place to be leveraged.

[Exelord]

Im a huge fan of this idea. Been using it for years in Ember.js and can say, it's a blessing when it comes to paths changing.

What do you think about such a Link interface?

<Link name="users.user" params={{ id: 1 }} queryParams={{ source: "home" }} />

[Haberkamp]

Any plans on working on this feature? If I can find any time I might try and work on this issue.

[Alioth996]

Forward it!

[fabiospampinato]

This looks a bit like an anti-pattern to me, now there's an invisible implicit link between the path of the route and the name of the route, like you can hypothetically name your /users route "user" and your /user route "users". For things not to break a better approach IMO is to have a single source of truth, i.e. there should probably be some objects exporting these paths, which can then be referenced both in the router and in links.

[mattersj]

@fabiospampinato

now there's an invisible implicit link between the path of the route and the name of the route

Not really, it creates an explicit link between them in one place and you can always go to your route definition and check it out.
If you for some reason name your route user and it has a path /users it means that you could've done such a mistake even without named routes, e.g. redirect to /user instead of /users. In both cases you'll end up with an error in your console.

Anyway, there's a good practice to keep your names in some enum/object and use them instead of magic strings, which is better IMO.

have a single source of truth

With named routes your single source of truth is the name of your route in case you've decided to use them instead of plain paths.

---

The main advantage with named route is that you can control what route you're targeting in instead of letting the router decide for you.
For instance, if I have a route definition like /users/:id and my current path is /users/9999 then I can do navigate({ name: '404', params: { all: pathname } }) so that way I'm explicitly saying that I want to go to 404 without changing the current path.
It's not possible to do this with current implementation since the router decides for you and in the mentioned case you can't just go to 404 even though you want to.

@ryansolid What your thoughts on this limitation are?