We Keep Coding

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

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 component 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......

You can use path
const routeId = 3
this.$router.push({ path: `/actions-log/${routeId}` })

i figured out what's happening i have a component called pageTitle this component is included by every other component 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 computed 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.

How do I pass data to another component using Vue router?

Currently, I have a component that is rendered on the page, when I console log the this.$router variable inside the component, i see the full path property is equal to '/hello/reports?report=3849534583957' and the path property is equal to just '/hello/reports/'.
In a separate component I am trying to pass data to the component above by using
this.$router.push({path:`/hello/reports?report=3849534583957`, params: {data: 'hey'}})`
However, when I try to look at the params in the vue devtools or by console logging this.$route.params.data it returns me undefined.
I believe I am doing everything correctly, please help me understand where I am going wrong. I have tried replacing the full path property's value with just the regular path property's value, inside the push method as well. Thank you

Router params map to values that are setup in the router configuration.
const router = new VueRouter({
routes: [{ path: '/user/:id', component: User }]
})
id is a valid param for this route.
Find more on the official docs: https://router.vuejs.org/guide/essentials/dynamic-matching.html#dynamic-route-matching

Navigating to a new optional base route while maintaining the current nested routes - Vue Router

Please may someone help me with a params/named route question.
I'm trying to achieve an optional named route change at the first level while maintaining nested structure. Is there a way to achieve this using named routes?
For example imagine use case, either:
/europe/train
or
/car/europe/spain
I would have a new named route going to train instead of car and the behaviour to link to the full path of:
/train/europe/spain
Currently this takes you to the base route with the first level /train removing nested routes, you then need to reselect Europe and Spain.
This is the current setup I'm trying to achieve this:
path: '/:transportSlug?',
name: 'Transport',
...
children: [
{
path: ':regionSlug',
name: 'Region',
...
children: [
{
path: ':countrySlug',
name: 'Country',
...
<router-link :to="{
name: 'Transport',
params: {
transportSlug: filter.slug,
regionSlug: region.slug,
countrySlug: country.slug
}
}">
This is passing in 3 params when navigating to a new base route and all 3 are being correctly passed. I can output them in the view which makes me think it may be a technical limitation/misunderstanding somewhere.
I'm aware of path routing and creating the full path with a computed properly.
Example here
Thank you.

With help from Posva from Vue I was able to solve this.
My approach and understanding of how Vue Router worked was slightly incorrect by thinking that you needed to reference the named route in a nested tree that you wanted to update.
To update the Transport type in /euope/spain I would need to instead reference the Country named route and update the param for the transport.
<router-link :to="{
name: 'Country',
params: {
transportSlug: filter.slug,
}
}">
This maintains the correct URL while updating the Transport type.
Hope this may be of some help to someone.

Vue Routing and Regex Patterns

I'm using Vue and recently introduced a route with a parameter.
const routes = [
{
path: "/:lang(^$|^es$|^pt$|^cn$)",
name: "Home",
component: Page,
},
{
path: "/privacy",
name: "Privacy",
component: Privacy,
},
{
path: "*",
name: "NotFound",
component: NotFound,
}
];
I want the route to trigger when one of the following conditions is met.
lang is empty
lang is either es or pt or cn but no combinations of those.
Everything else should go to the NotFound route
The regex I'm using above works on the javascript engine of https://regexplanet.com
I tried all sorts and variations to make it work in Vue but to no avail so far.

I believe the path you need is:
path: "/:lang(|es|pt|cn)",
There's a routing tester here that uses the same library as Vue:
https://forbeslindesay.github.io/express-route-tester/
Make sure you're testing against path-to-regexp 0.1.7.
The problem is that the whole path gets converted to a RegExp, not just the bits in the brackets. So your ^ are never going to match anything. Try putting your original path into the testing tool to see how it compiles. The generated RegExp already contains its own ^ and $ but they are relative to the whole path, not just the parameter you're trying to match.

vue.js / vue-router - create instance of single file component with props to route to

My goal is to further reduce code and the most obvious one in my project is to abstract lists. Currently I have a vue single file component called List which includes an async data loader. I've also created a bunch of 'derived' single file components using this List component as root tag element, passing props as needed to load the correct data.
Now, since I've split up my components into separate files using this plugin it is common to have a folder structure which looks like this:
\components\
\components\List\
\components\List\List.vue
\components\List\List.vue.js
\components\List\List.scoped.vue.css
\components\List\List.vue.html
As you can see, 4 files per component. Imagine having 10 different list components all using List as their base. That is 10 folders with a total of 40 files. And for what? Pretty much the same code, 2-3 values that change (the properties), the rest stays the same.
I've been trying to adjust List so that I can create an instance of it and pass the properties as constructor values. Why? Instead of having 1 folder with 4 files per list, I could just have the base List and the create the components like so:
let FooList = new List('foo', true, {}, (x) => {});
let BarList = new List('bar', false, {}, (y) => {});
I want to use these objects in the vue-router like so:
const router = new Router({
...
routes: [
{
path: "some/foo,
component: FooList,
},{
path: "any/bar,
component: BarList,
},
]
});
Anything I tried failed.
What have I tried so far?
export default { ... } exports a default single file component. I figured if this is a component, I might as well just override some values in it.
How did I try to do this?
I tried using Object.assign({ ... }, List) in the hope of creating a List object which has the properties defined like I want them to be.
I also tried using the vue built in "extends" option of single files components to extend List, but this doesn't save code at all since I still need to define a template/render method for the component .. which results in those 4 files again. I tried to use Vue.component(..) and Vue.extend(..), alone and in combination but couldn't succeed.
Anything I tried resulted either in a max stack exceeded exception (recursion gone wrong), vue errors were thrown stating that something doesn't fit or just not displaying anything at all.
Is there a way of doing this?

You could define a prop on the List component to specify the type of list and modify the behavior.
let routes = [
{
path: '/home',
name: 'home',
component: List,
props: { config: { type: 'Listing', display: 'Tile' } }
},
]