I have a user list ponent and also a calendar ponent. 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',
    ...
}

I have a user list ponent and also a calendar ponent. 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',
    ...
}

• javascript
• vue.js

Share Improve this question Follow asked Feb 27, 2019 at 9:28 LigaLiga 3,43966 gold badges3838 silver badges6767 bronze badges 5

• one solution would be to use localStorage - I could write an answer with that approach if that's an option for you? – iLuvLogix Commented Feb 27, 2019 at 9:41
• yes, at this point I'm just desperate... – Liga Commented Feb 27, 2019 at 9:42
• ok - gimme like 5 minutes to write the answer.. – iLuvLogix Commented Feb 27, 2019 at 9:45
• is F_Mekk's answer sufficient for you? – iLuvLogix Commented Feb 27, 2019 at 10:07
• It might be, let me try it – Liga Commented Feb 27, 2019 at 10:08

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 2

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

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>