CODEWITHSUNDEEP
vue.jsparametersnuxt.jsvue-router
mitchK
mitchK

Reputation: 47

vue router.push in nuxt using route.name

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"}})

Upvotes: 0

Views: 4783

Answers (2)

Mythos
Mythos

Reputation: 1482

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.

Upvotes: 0

kissu
kissu

Reputation: 46696

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.

Upvotes: 1

Related Questions