I want to navigate to a specific tab in a page, with

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

so inside the page i can get the param and set the tab:

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

It works if the current page is not AdminNotifications.

But else, there is an error: NavigationDuplicated: Avoided redundant navigation to current

So... is there a way to just set the tab props, without navigate?

thanks

CodePudding user response：

If i understood your question correctly you can just do this.$route.params.tab = "any value" like any other variable. this.$route.params.tab is just a variable like all the others.

CodePudding user response：

You can't navigate to a route if you're already there. But, since you're already there, you can just set this.tab to the desired value:

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

If the component in charge of navigating is not the same as the one containing tab, you could push the tab param to the $route:

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

And in the page component, replace the "watcher" in mounted with a proper watch:

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

CodePudding user response：

Here is how I was handling this with the vue-router.

1. Add one parent component which will contain tabs and a tab content components.
Your structure can looke like this:



tabs/Tab1.vue
tabs/Tab2.vue
tabs/Tab2.vue
Tab.vue


2. In Tabs.vue paste code below. The component should contain in the place where you want to display the content of your tabs and router-links to link a specific tab.

Tab.vue

<template>
  <div >
    <router-link to="/tab1">Tab 1</router-link>
    <router-link to="/tab2">Tab 2</router-link>
    <router-link to="/tab3">Tab 3</router-link>
    <router-view />
  </div>
</template>

<script>
export default {
  name: "tabs",
  components: {},
};
</script>

3. Then fill tabs content components.
4. In your router.js register your tab routes as shown below.

import Tabs from "./Tabs";
import Tab1 from "./tabs/Tab1";
import Tab2 from "./tabs/Tab2";
import Tab3 from "./tabs/Tab3";

{
    path: "/",
    redirect: "/tab1",
    component: Tabs,
    children: [
      {
        path: "/tab1",
        name: "tab1",
        component: Tab1
      },
      {
        path: "/tab2",
        name: "tab2",
        component: Tab2
      },
      {
        path: "/tab3",
        name: "tab3",
        component: Tab3
      }
    ]
  }

Now you should be able to navigate a specific tab by router link.