如何使用 vue router-link 仅更改一个参数答案

【问题标题】：How to change only one parameter using vue router-link如何使用 vue router-link 仅更改一个参数
【发布时间】：2019-02-27 09:28:09
【问题描述】：

我有一个用户列表组件和一个日历组件。当我单击用户链接时，我希望 url 仅更改 selectedUser 参数，但保留所有其他参数。

现在，如果我点击更改日期链接，它会更改日期，但如果我点击用户链接，它仍然会看到呈现时的旧日期。

url: /users/John/month/2019/01 点击更改日期后 - /users/John/month/2009/09

然后当我点击其中一个用户时 - /users/Bob/month/2019/01

用户链接如下所示

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

更改日期的日历链接如下所示

<router-link
    :to="{ name: 'MainRoute', params: { selectedMonth: '09', selectedYear: '2009' }}">
    Change date
</router-link>

这是我的路线对象

{
    name: 'MainRoute',
    path: '/users/:selectedUser/:selectedView/:selectedYear/:selectedMonth',
    ...
}

【问题讨论】：

一种解决方案是使用 localStorage - 如果您愿意，我可以用这种方法写一个答案？
是的，此时我只是绝望了……
好的 - 给我 5 分钟的时间来写答案..
F_Mekk 的回答对你来说足够了吗？
有可能，我试试

标签： javascript vue.js

【解决方案1】：

你可以通过 $route.params 访问实际的路由参数，所以也许你可以这样使用它：

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

【讨论】：

嗯，我得到了 - TypeError: Cannot read property 'params' of undefined
也许可以尝试删除 this like $route.params

【解决方案2】：

  <li v-for="user in users">
    <button @click="changeOnlyOneParam('selectedUser', user.id)">
      {{ user.username }}
    </button>
  </li>

changeOnlyOneParam 方法：

methods: {
    changeOnlyOneParam(paramName, changeTo) {
        let params = this.$route.params
        params[paramName] = changeTo
        this.$router.push({ name: this.$route.name, params: params })
    }
}

【讨论】：

这在我尝试时不起作用。显然，由于params 的引用没有改变，Vue Router 忽略了推送。必须做类似let params = JSON.parse(JSON.stringify(this.$route.params)) 之类的事情。

【解决方案3】：

我认为，您不能更改 this.$route 对象。需要一份副本：

this.$router.push({ 
        name: this.$route.name,
        query: {...this.$route.query, [name]:value}
    });

【讨论】：