如何正确使用vue-materials tab router和vue-router？

Question

我想在我的 Vue 项目中使用 vue-material 选项卡作为我项目中的主要导航元素。标准选项卡 (https://vuematerial.io/components/tabs/) 似乎已经具有该功能。

遗憾的是，我并没有真正理解我现在使用的普通 vue 路由器与 vue-material 示例中的自动路由之间的 link。

我的旧 App.vue 看起来像这样：

<template>
  <div id="app">
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: "app"
};
</script>

现在我会把模板改成这样：

<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>

“/home”和“/jobs”是我现在在我的视图路由器中运行的路由。但这是行不通的。我还尝试了类似于 vue-material 文档中示例的“/components/Home.vue”。

我得到的错误是：

"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>  [...]"

我希望你能告诉我我错在哪里。可能是我导航到 <md-tab> 的“to”参数中的错误路径，或者我用 Vue 路由器做了一些我不应该用 vue-material 做的事情。

Answer 1

将 vue-router 降级到 3.0.1 解决问题。证明：

https://codesandbox.io/s/oxlryzvzl9

有一个 bug 似乎仍然出现。

如何正确使用vue-materials tab router和vue-router？

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

javascript

vue.js

vue-material