Exploring the usage of vue-material tabs in my Vue project for navigation, I discovered that the standard tabs provided already offer this functionality (). However, I'm struggling to integrate these tabs with the normal vue router in my current setup.
Previously, my App.vue looked like this:
<template>
<div id="app">
<router-view></router-view>
</div>
</template>
<script>
export default {
name: "app"
};
</script>
I attempted to modify the template to utilize vue-material tabs:
<template>
<div>
<md-tabs md-sync-route>
<md-tab id="tab-pages" md-label="Jobs" to="/home"></md-tab>
<md-tab id="tab-home" md-label="Home" to="/jobs"></md-tab>
</md-tabs>
</div>
</template>
Despite assigning functioning routes ('/home' and '/jobs'), this approach did not work. I also experimented with using '/components/Home.vue' similar to the example provided in the vue-material documentation.
The error message received was:
"Vue warn]: Error in render: "TypeError: Cannot read property 'options' of undefined"
found in
---> <MdTab> at src/components/MdTabs/MdTab.vue
<MdContent> at src/components/MdContent/MdContent.vue
<MdTabs> at src/components/MdTabs/MdTabs.vue
<App> at src/App.vue
<Root> [...]"
If you can pinpoint where I may be going wrong, it would be greatly appreciated. It's possible that a mistake lies in the 'to' parameter of the <md-tab>, or an incorrect usage of the Vue router alongside vue-material components.