Save the open state of tabs in vue js

Question

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 ?

Answer 1

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>