How to use Vue Routes with Vue Material Tabs?

2
votes

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.

Thanks.

4
vue.jsvuejs2vue-routervue-material

4 Answers

4
votes

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

1
votes

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}
]
0
votes

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)
} }
0
votes

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