Is there a way to set the route prop in vue?

Question

I want to navigate to a specific tab in the page

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

So within the page I can get the parameters and set the tab:

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

Valid if the current page is not AdminNotifications.

But in addition, there is an error: NavigationDuplicated: Avoids redundant navigation to the current

So...is there a way to just set the tab attribute without navigation?

Thanks

Answer 1

You cannot navigate to a route if you have already reached it. But now that you're already there, you can just set this.tab to the value you want:

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

---

If the component responsible for navigation is different from the component containing tab, you can push the tab parameter to $route:

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

In the page component, replace "watcher" in mounted with an appropriate watcher that dynamically sets tab to $route.params. Any truth value of tab:

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