CODEWITHSUNDEEP
javascriptvue.jstabsvuetify.js
user12763413
user12763413

Reputation: 1349

Back button on the browser not taking to the right tab in vue

I am using v-tabs in my app. The issue I am facing here is that on users tab I have links which take me further to another page. But when I click on back button on the browser to go back to the previous page which is the users tab page it takes to the officers tab instead of the users tab. Please help me fix this problem.

<v-tabs v-model="tabsOption"
     centered
     color="black"
     slider-color="red">
 <v-tab  href="#officers">Officers</v-tab>
 <v-tab  href="#users">Users</v-tab>
</v-tabs>

<script>
      export default {
        data: function() {
          return {
            tabsOption: 'officers'
          }
        },
        created: function() {
          this.tabsOption = window.location.hash.slice(1) || 'officers' || 'users';
        },
      }
</script>

Upvotes: 3

Views: 1220

Answers (1)

Jordan Lundgren
Jordan Lundgren

Reputation: 273

If you use v-tab-item you can combine the :to attribute in the v-tab with the value attribute in the v-tab-item by using a hash link, like this:

<v-tabs>
    <v-tab :to="'#alpha'">Tab A</v-tab>
    <v-tab :to="'#bravo'">Tab B</v-tab>
    <v-tab-item value="alpha">Tab A content</v-tab-item>
    <v-tab-item value="bravo">Tab B content</v-tab-item>
</v-tabs>

If you click "Tab B" and then a click some link that takes you to a new page, and then go back, either via the browser back button, or a history.back(), the "Tab B" will be active and its content "Tab B content" will be visible

Upvotes: 3

Related Questions