如何使用 vue router-link 只更改一個參數

Question

我有一個用戶列表組件和一個日歷組件。 當我單擊用戶鏈接時，我希望 url 只更改 selectedUser 參數，而不要管其他所有參數。

現在，如果我點擊更改日期鏈接，它會更改日期，但是如果我點擊用戶鏈接，它仍然會看到呈現時的舊日期。

網址：/users/John/month/2019/01 點擊更改日期后 - /users/John/month/2009/09

然后當我點擊其中一個用戶時 - /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>

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