Question

我有一个用户列表组件和一个日历组件。当我单击用户链接时，我希望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',
    ...
}

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

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

Answer 3

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

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

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

3 个答案: