Home  >  Q&A  >  body text

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

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

P粉919464207P粉919464207108 days ago323

reply all(1)I'll reply

  • P粉432930081

    P粉4329300812024-04-07 09:29:13

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

    reply
    0
  • Cancelreply