javascript - 如何使用vue router-link只改变一个参数

Question

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

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

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

用户链接看起来像这样

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