How to use vue-materials tab router with vue-router correctly?

Question

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.

Answer 1

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.