I wanted to use the vue-material tabs in my Vue project as the main navigation element in my project. The standard tabs (https://vuematerial.io/components/tabs/) seems to already have that functionality.
Sadly I dont really get the link between the normal vue router I am using right now and the automatic routing in the vue-material examples.
My old App.vue
looked like this:
<template>
<div id="app">
<router-view></router-view>
</div>
</template>
<script>
export default {
name: "app"
};
</script>
Now I would have changed the template to something like that:
<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>
With "/home" and "/jobs" being my now functioning routes in my view router. But this is not working. I also tried "/components/Home.vue" similar to the example in the vue-material docs.
The error I get is:
"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> [...]"
I hope you can tell me where I am wrong. It is probably that I am navigating to a wrong path in the "to" parameter of the <md-tab>
or that I do things with the Vue router that I am not supposed to do with vue-material.
Downgrading vue-router to 3.0.1 solves the problem. Proof:
https://codesandbox.io/s/oxlryzvzl9
There was a bug which seems to still appear.