我有一个用户列表组件和一个日历组件。当我点击用户链接时,我希望网址只更改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',
...
}
您可以通过$ 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>