有没有办法在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
  }
}