How to use Vue Routes with Vue Material Tabs?

Question

I am using Vue Material Tabs https://vuematerial.github.io/#/components/tabs and I would like to know if there is a way to implement Vue Router with tabs.

Using named Views I can show a different router view in every tab but I want to know how to get a different route in every active tab.

Example:
Click the Tab 1 has the route "/"
Click the Tab 2 has the route "/user"

And in the browser if I go to the "/user" route I want it to show the Tab #2 activated with their route view and If I write the main route "/" I want it to show the Tab 1# with their content.

Justin MacArthur · Accepted Answer · 2017-04-04 14:47:53Z

4

The easiest way I can think would be to bind md-active to the route's path parameter.

<md-tab id="movies" md-label="Movies" :md-active="isPath('/movies')">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt dolorum quas amet cum vitae, omnis! Illum quas voluptatem, expedita iste, dicta ipsum ea veniam dolore in, quod saepe reiciendis nihil.</p>
</md-tab>
<md-tab id="books" md-label="Books" :md-active="isPath('/books')">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt dolorum quas amet cum vitae, omnis! Illum quas voluptatem, expedita iste, dicta ipsum ea veniam dolore in, quod saepe reiciendis nihil.</p>
</md-tab>

component:

export default {
    methods: {
        function isPath (path) {
           return this.$route.path === path
        }
    }
}

you might have to tweak some of the paths to match the route's parameter but this should give you the active tab on the correct path

answered Apr 4, 2017 at 14:47

Justin MacArthur

4,05024 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Clive Sargeant Over a year ago

you may find this helpful github.com/vuematerial/vue-material/issues/824 - it shows an example of how to get the tab clicks

sfyrious · Accepted Answer · 2018-04-02 14:06:09Z

1

md-sync-route is the way to go

Here is an example:

 <md-tabs md-sync-route>
    <md-tab id="tab-home" md-label="Home" md-icon="home" to="/">
      <router-view></router-view>
    </md-tab>
    <md-tab id="tab-teams" md-label="Teams" to="/teams" class="md-primary">
      <router-view></router-view>
    </md-tab>
 </md-tabs>

And in the router/index.js:

routes: [
   {path: "/", component: Home},
   {path: "/teams", component: Teams}
]

answered Apr 2, 2018 at 14:06

sfyrious

211 bronze badge

2 Comments

Ankit Kante Over a year ago

The issue with this code is that if I go to the / route, the Home component will be loaded in both the tabs, Home as well as Teams.

mdmostafa Over a year ago

I followed in this way to fix this type of problem and it works for me stackoverflow.com/questions/43163322/…

Travis S · Accepted Answer · 2018-01-29 05:07:02Z

I recently discovered how to dynamically generate md-tabs from routes.

router/index.js:

routes: [
{ path: '*', redirect: '/home' },
{
  path: '/home',
  component: Home,
  icon: 'move_to_inbox'
}, ... ]

menu component:

<md-tabs v-if="type === 'tabs'" class="md-primary">
  <md-tab v-for="route in $router.options.routes" :key="route.path" v-if="route.path != '*'" :to="route.path" :md-label="uCaseFirst(route.path.slice(1))"></md-tab>
</md-tabs>

<md-list v-if="type === 'menu'">
  <md-list-item v-for="route in $router.options.routes" :key="route.path" v-if="route.path != '*'" :to="route.path">
    <md-icon>{{route.icon}}</md-icon>
    <span class="md-list-item-text">{{uCaseFirst(route.path.slice(1))}}</span>
  </md-list-item>  
</md-list>


...
props: ['type'],
methods: {
  uCaseFirst(s) {
    return s.charAt(0).toUpperCase() + s.slice(1)
} }

drunkZombie · Accepted Answer · 2018-02-21 16:42:15Z

0

I know the it is already answered but there's a straight forward solution to this which I found today. May be it will help someone else.

md-sync-route property can be used with <md-tabs> tag and this shall keep the current active tab in sync with the route.

Ref Here

answered Feb 21, 2018 at 16:42

drunkZombie

1821 gold badge3 silver badges18 bronze badges

Comments

Nimantha · Accepted Answer · 2021-11-18 10:12:16Z

0

I have faced the same problem and solved in this way that--

I used @click="$router.push('/');" in the opening <md-tab .... > tag

<md-tabs class="md-transparent" md-alignment="fixed">
  <md-tab 
    id="tab-home" 
    md-label="Posts" 
    @click="$router.push('/')"
  >
  </md-tab>
  <md-tab
    id="tab-pages"
    md-label="Category"
    @click="$router.push('/category')"
  >
  </md-tab>
</md-tabs>

edited Nov 18, 2021 at 10:12

Nimantha

6,5376 gold badges32 silver badges78 bronze badges

answered Sep 16, 2021 at 9:42

mdmostafa

8921 gold badge12 silver badges20 bronze badges

Collectives™ on Stack Overflow

How to use Vue Routes with Vue Material Tabs?

5 Answers 5

1 Comment

2 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

1 Comment

2 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related