vue router.push in nuxt using route.name

Question

I use nuxt and have following Problem. My old code looks like this:

this.$router.push({path: "about/me"})

Now I need to make the same call with some params:

this.$router.push({path: "about/me", params: {sendNotification: "1"}})

This obviously doesn't work since vue-router only allowes to use params with name and not path, so it has to look like:

  this.$router.push({name: ..., params: {sendNotification: "1"}})

I could do it with query instead of params but I don't want my url to look ugly. The problem with nuxt is, or at least this is my understanding of nuxt, that it generates the route names using folder structure and in my case also the locale. So the name of this route is actually: "personal-about-me__en".

So my question: Is there a way to get the route.name dynamically, so I could write something like:

  this.$router.push({name: getRouteNameByPath("about/me"), params: {sendNotification: "true"}})

kissu · Accepted Answer · 2021-08-31 12:05:28Z

1

The name of the route path is matching the name prop that you can give to the .vue file. So, write is as name: 'AboutMe' key property and use it in the router with { name: 'about-me' }.

Also, vue devtools have a router tab with the name of all the available routes.

answered Aug 31, 2021 at 12:05

kissu

47.3k16 gold badges94 silver badges196 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

kissu · Accepted Answer · 2021-08-31 15:17:21Z

0

This obviously doesn't work since vue-router only allowes to use params with name and not path.

Why do you need to pass params alongside the path? You are supposed to add the params to the path itself, which is why vue-router doesn't allow a separate params object.

So for e.g. assuming your dynamic route is about/me/:sendNotification, you can either provide params with the named route:

this.$router.push({name: ..., params: {sendNotification: "1"}});

which directs you to about/me/1.

OR you can push the entire path including the params

this.$router.push({ path: 'about/me/1' });

Both will produce the exact same result.

edited Aug 31, 2021 at 15:17

kissu

47.3k16 gold badges94 silver badges196 bronze badges

answered Aug 31, 2021 at 15:14

Mythos

1,5021 gold badge10 silver badges21 bronze badges

Collectives™ on Stack Overflow

vue router.push in nuxt using route.name

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related