When selecting a page from the tab using Vue Material Tab, the program should display the corresponding content. I have set up routes and installed dependencies, but the content does not show up when I click on the tab. There are two Vue components in the code to test the content of two screens - 'Menu' and 'Home'. The intention is to display a toolbar-like row at the top of the view populated with tabs.
App.vue
<template>
<div>
<md-tabs md-sync-route>
<md-tab id="tab-home" md-label="Home" to="/components/Home" exact></md-tab>
<md-tab id="tab-pages" md-label="Pages" to="/components/Menu"></md-tab>
</md-tabs>
<router-view/>
</div>
</template>
<script>
export default {
name: 'App',
}
</script>
index.js
import Vue from 'vue'
import Router from 'vue-router'
import Home from '@/components/Home'
import Menu from '@/components/Menu'
import VueMaterial from 'vue-material'
import 'vue-material/dist/vue-material.min.css'
import 'vue-material/dist/theme/default.css'
Vue.use(VueMaterial)
Vue.use(Router)
export default new Router({
mode: 'history',
routes: [
{
path: '/',
name: 'Home',
component: Home
},
{
path: '/Home',
name: 'Home',
component: Home
},
{
path: '/Menu',
name: 'Menu',
component: Menu
},
]
})
Menu.vue
<template>
<div>
<h1>Menu</h1>
</div>
</template>
<script>
export default {
name: 'Menu'
}
</script>
Home.vue
<template>
<div>
<h1>Home</h1>
</div>
</template>
<script>
export default {
name: 'Home',
}
</script>