有沒有辦法在vue中設定route prop？

Question

我想導航到頁面中的特定選項卡

this.$router.push({
        name: "AdminNotifications",
        params: { tab: "requests" },
      })

因此在頁面內我可以取得參數並設定選項卡：

mounted() {
    const routeTab = this.$route.params.tab;
    if (routeTab) this.tab = routeTab;
  }

如果目前頁面不是 AdminNotifications，則有效。

但除此之外，還有一個錯誤： NavigationDuplicated：避免了到目前的冗餘導航

那麼...有沒有辦法只設定 tab 屬性，而不需要導航？

謝謝

Answer 1

如果您已經到達某個路線，則無法導航至該路線。但是，既然您已經在那裡，您只需將 this.tab 設定為所需的值即可：

if (this.$route.name === 'AdminNotifications') {
  this.tab = 'requests';
} else {
  this.$router.push({
    name: "AdminNotifications",
    params: { tab: "requests" },
  })
}

---

如果負責導航的元件與包含 tab 的元件不同，您可以將 tab# 參數推送到 $route：

if (this.$route.name === 'AdminNotifications') {
  this.$router.replace({
    params: { tab: "requests" }
  });
} else {
  this.$router.push({
    name: "AdminNotifications",
    params: { tab: "requests" },
  })
}

在頁面元件中，將mounted 中的「watcher」替換為適當的監視程序，該監視程序將tab 動態設為$route.params. tab 的任何真值：

watch: {
  '$route.params.tab': {
    handler(val) {
      if (val) {
        this.tab = val;
      }
    },
    immediate: true
  }
}