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.

Array in route parameter cause "Expected to not repeat" warning

When I try to create a router-link with an array as parameter, the link works but I get the following warning :
missing param for named route "start-run": Expected "files" to not repeat, but received ["aaa"]
router.js
...
{
path: '/start-run/:config?/:files?',
name: 'start-run',
component: StartRun,
props: true
},
...
file.vue
...
<router-link :to="{name: 'start-run', params: { config: 'test', files: ['aaa'] }}">...</router-link>
...
I didn't find documentation to fix this warning.

I believe the error message comes from path-to-regexp version 1.7.0, which is used by Vue Router:
https://github.com/pillarjs/path-to-regexp/blob/v1.7.0/index.js#L185
The problem is that an array is treated as multiple values but the parameter in your path does not support multiple values.
It is unclear what you are trying to achieve by passing an array to files. The route path you've defined uses a ? suffix for :files?, which makes it optional but doesn't allow for an array. Perhaps you meant :files* or :files+ instead? Or maybe you just want to pass the first item in the array?

Get the route path with special character and dynamic variable in react

The path provided in the react router component is not working as expected.
e.g: path: "/route?name=/:name/&course=/:course/"
Dynamic variable in the URL: /:name/ and /:course/

name and course are query params and should not be specified in Route.
You can simply have your component Route like
path= "/route"
and detect query params changes as mentioned in the following post
Detect change in query param react-router-dom v4.x and re-render component
or you could design your route to make name and course and path params and have your Route like
path: "/route/:name/:course/"

Refresh data on vue

This may have been asked but I have not be able to find a solution. I have a index page that loads a left nav vue. On that view is a typeahead input with names. When a name is selected a function is called and and a unique value is passed as the pmid_list
this.$router.push({ name: 'About', params: { pmid_list: item.PMID_Include } }
This works fine the first time because the About vue is loaded and the function is called with the pmid_list value. Every name works fine if I refresh the page between calls. If I don't refresh the correct pmid_list (parameter) is sent to the router but the router decides to send the old one if the vue component has not changed.
From what I have read it is a router issue but I can't figure out how to force it to refresh.
export default new Router({
mode: 'history',
routes: [
{
path: '/about/:pmid_list',
name: 'About',
component: About,
props: {default: true}
}

The About component is being cached.
One thing to note when using routes with params is that when the user navigates from /user/foo to /user/bar, the same component instance will be reused. Since both routes render the same component, this is more efficient than destroying the old instance and then creating a new one. However, this also means that the lifecycle hooks of the component will not be called.
Dynamic Route Matching
As shown in the documentation, you should use a watcher to react to parameter changes:
watch: {
'$route' (to, from) {
// react to route changes...
}
}

You can try to watch your route changes.
watch:{
'$route.params.pmid_list': function (pmid_list) {
//your logic here
}
},

How to define property with a component?

I currently have three steps in a form that I want to show sequentially, so I created three components - one for each step of the process.
My app.js file:
import LocationList from './components/LocationList.vue';
import ChooseTime from './components/ChooseTime.vue';
import ChooseMethod from './components/ChooseMethod.vue';
Vue.component('location-list', LocationList);
Vue.component('choose-time', ChooseTime);
Vue.component('choose-method', ChooseMethod);
let store = {
isVisible: {
steps: {
one: true,
two: false,
three: false,
}
}
};
new Vue({
el: '#app-order',
data: store,
router
});
Now, when my one and only route is called,
import VueRouter from 'vue-router';
let routes = [
{
path: '/order',
component: require('./views/Order.vue')
}
];
export default new VueRouter({
routes
});
all these components are being loaded properly. The issue is that when I try to v-show them one at a time:
Order.vue:
<template>
// ...
<location-list v-show="isVisible.steps.one"></location-list>
<choose-time v-show="isVisible.steps.two"></choose-time>
<choose-method v-show="isVisible.steps.three"></choose-method>
// ...
</template>
<script>
</script>
<style>
</style>
The error message I receive is:
[Vue warn]: Property or method "isVisible" is not defined on the instance but referenced during render. Make sure to declare reactive data properties in the data option.
But when I check within Vue's browser extension, isVisible is defined within the root element?
As you can see it is in the root-element, but not inside the Order view though.
Thanks for any help!

In Vue, child components do not have direct access to data defined in their parents. You have to pass the data down.
I think you would probably save yourself a little trouble if you just defined isVisible in Order.vue. However, if you want to leave it where it is, you need to pass it into the component.
One easy way to do that is to define isVisble as a property of Order.vue and then pass it through your router-view.
<router-view :is-visible="isVisible"></router-view>
There are other ways of passing props to routes that are defined in the router documentation.
The reason I say you would save your self some trouble defining isVisible in Order.vue is because whenever you want to change the values of your steps, you will need to do it at the root as you currently have it defined.