CODEWITHSUNDEEP
javascriptvue.jstabsvuejs3tailwind-css
M Atif Mehmood
M Atif Mehmood

Reputation: 355

Save the open state of tabs in vue js

I am creating a project. I've to work with many routes and tabs inside it. My problem is that I want my browser to remember that which tab was opened before refreshing the page.Suppose I have 3 tabs on 1 page and I opened the 2nd or 3rd tab, than I refresh the page it kick me back to 1st tab. How to prevent this.Is their any solution ?

Upvotes: 0

Views: 1003

Answers (1)

Kapcash
Kapcash

Reputation: 6909

Use child routes. Each tab would content a <router-view> element, which corresponds to a page within a page.

See vue-router docs on Nested Routes

const routes = [
  {
    path: '/my-page',
    component: MainPage,
    children: [
      {
        path: 'tab1',
        component: Tab1Content,
      },
      {
        path: 'tab2',
        component: Tab2Content,
      },
    ],
  },
]

<!-- On /my-page/tab-2, Tab2Content will be rendered in the <router-view> -->
<template>
  <v-tab>
    <router-view /> <!-- Sub route -->
  </v-tab>
</template>

Upvotes: 1

Related Questions