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

user_13466661 0
Viewed 191

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

vue-router vue.js
4 Answers

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, which sets tab to any truthy value of $route.params.tab, dynamically:

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

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.

user_155454510

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.
    2. 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.

    3. Tab.vue

    <template>
  <div class="tabs">
    <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.
    5. 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.

user_132675180

In the file where you define the routes, you need to define the props for each route, something like this:

const routes = [
  {
    path: "admin-notifications",
    name: "AdminNotifications",
    component: AdminNotificationsView,
    props: r => ({
      tab: r.params.tab
    })
  }
]

And then define the prop tab in AdminNotificationsView assuming that's the component you use to render the view.

user_88256400
Related