javascript - error while using params in the router.push function vue-router 4 - Stack Overflow

admin管理员组

文章数量:1023866

hello guys i'm new to vue js and i'm trying to pass paramenters to a specific router this should happen when i click on a card research and then it will redirect to the research details ponent called actions-log but when i call this router via

this.$router.push({ name: "actions-log", params: { Id: "3" } })

it gives me an error in the console says:

Uncaught (in promise) Error: No match for {"name":"3","params":{}}

so can any one help me with that error please......

hello guys i'm new to vue js and i'm trying to pass paramenters to a specific router this should happen when i click on a card research and then it will redirect to the research details ponent called actions-log but when i call this router via

this.$router.push({ name: "actions-log", params: { Id: "3" } })

it gives me an error in the console says:

Uncaught (in promise) Error: No match for {"name":"3","params":{}}

so can any one help me with that error please......

• javascript
• vue.js
• vue-router
• vuejs3
• vue-router4

Share Improve this question Follow edited Feb 3, 2022 at 18:40 tony19 139k2323 gold badges278278 silver badges348348 bronze badges asked Feb 3, 2022 at 10:07 nerweennerween 4111 silver badge88 bronze badges 2

• That is how I do it, too. Weird is, that he thinks that "3" is the name. ... have not used params in capital. But I would not think, that it makes a difference. ... It could be the dash in actions-log. Sometime dashed names cause some errors in some places in Vue. – Ehrlich_Bachman Commented Feb 3, 2022 at 14:12
• @Ehrlich_Bachman no not working... – nerween Commented Feb 3, 2022 at 19:36

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 2

You can use path

const routeId = 3

this.$router.push({ path: `/actions-log/${routeId}` })

i figured out what's happening i have a ponent called pageTitle this ponent is included by every other ponent i use it to make the breadcrumb using the:

this.$route.fullPath

then spliting it and looping the values with :

<li><router-link></router-link></li>

to make the breadcrumbs links but the fullPath prop of the vue router it returns the params too so through the loop in:

<router-link :to="{ name: {path} }">{{ path }}</router-link>

vue checks if the router is exists with the given name, for example when i put /actions-log/3 as params int the url it will be set in the :to attribute becuase of this behavios it's launch that exception;

so i think i solved the problems in the following puted fuction :

i don't know if someone has a better idea to create a breadCrumbs in vue... anyway thank you so much for helping me to resolve this problem.

hello guys i'm new to vue js and i'm trying to pass paramenters to a specific router this should happen when i click on a card research and then it will redirect to the research details ponent called actions-log but when i call this router via

this.$router.push({ name: "actions-log", params: { Id: "3" } })

it gives me an error in the console says:

Uncaught (in promise) Error: No match for {"name":"3","params":{}}

so can any one help me with that error please......

hello guys i'm new to vue js and i'm trying to pass paramenters to a specific router this should happen when i click on a card research and then it will redirect to the research details ponent called actions-log but when i call this router via

this.$router.push({ name: "actions-log", params: { Id: "3" } })

it gives me an error in the console says:

Uncaught (in promise) Error: No match for {"name":"3","params":{}}

so can any one help me with that error please......

• javascript
• vue.js
• vue-router
• vuejs3
• vue-router4

Share Improve this question Follow edited Feb 3, 2022 at 18:40 tony19 139k2323 gold badges278278 silver badges348348 bronze badges asked Feb 3, 2022 at 10:07 nerweennerween 4111 silver badge88 bronze badges 2

• That is how I do it, too. Weird is, that he thinks that "3" is the name. ... have not used params in capital. But I would not think, that it makes a difference. ... It could be the dash in actions-log. Sometime dashed names cause some errors in some places in Vue. – Ehrlich_Bachman Commented Feb 3, 2022 at 14:12
• @Ehrlich_Bachman no not working... – nerween Commented Feb 3, 2022 at 19:36

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 2

You can use path

const routeId = 3

this.$router.push({ path: `/actions-log/${routeId}` })

i figured out what's happening i have a ponent called pageTitle this ponent is included by every other ponent i use it to make the breadcrumb using the:

this.$route.fullPath

then spliting it and looping the values with :

<li><router-link></router-link></li>

to make the breadcrumbs links but the fullPath prop of the vue router it returns the params too so through the loop in:

<router-link :to="{ name: {path} }">{{ path }}</router-link>

vue checks if the router is exists with the given name, for example when i put /actions-log/3 as params int the url it will be set in the :to attribute becuase of this behavios it's launch that exception;

so i think i solved the problems in the following puted fuction :

i don't know if someone has a better idea to create a breadCrumbs in vue... anyway thank you so much for helping me to resolve this problem.

本文标签： javascripterror while using params in the routerpush function vuerouter 4Stack Overflow