I have a user list component and also a calendar component. When I click on a user link I want the url to only change the selectedUser parameter but leave all other params alone.
Right now if I click on Change date link it changes the date but then if I click on user link it still sees the old date as it was rendered.
url: /users/John/month/2019/01 after clicking on Change date - /users/John/month/2009/09
Then when I click on one of the users - /users/Bob/month/2019/01 <= back to the old date
user link looks like this
<li v-for="user in users">
<router-link
:class="{ active: user.id == selected }"
:to="{ name: 'MainRoute', params: { selectedUser: user.id }}">
{{ user.username }}
</router-link>
</li>
and calendar link for changing dates looks like this
<router-link
:to="{ name: 'MainRoute', params: { selectedMonth: '09', selectedYear: '2009' }}">
Change date
</router-link>
Here is my routes object
{
name: 'MainRoute',
path: '/users/:selectedUser/:selectedView/:selectedYear/:selectedMonth',
...
}
You can access actual route params by $route.params, so maybe you can use it like that :
<li v-for="user in users">
<router-link
:class="{ active: user.id == selected }"
:to="{ name: 'MainRoute', params: {selectedUser: user.id,
selectedView :$route.params.selectedView,
selectedMonth: $route.params.selectedMonth,
selectedYear: $route.params.selectedYear}}">
{{ user.username }}
</router-link>
</li>
<li v-for="user in users">
<button @click="changeOnlyOneParam('selectedUser', user.id)">
{{ user.username }}
</button>
</li>
changeOnlyOneParam method:
methods: {
changeOnlyOneParam(paramName, changeTo) {
let params = this.$route.params
params[paramName] = changeTo
this.$router.push({ name: this.$route.name, params: params })
}
}
I think, you are not allowed to change the this.$route object. A copy is needed:
this.$router.push({
name: this.$route.name,
query: {...this.$route.query, [name]:value}
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.