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

Question

我想在我的 Vue 項目中使用 vue-material 選項卡作為我項目中的主要導航元素。 標准選項卡（ https://vuematerial.io/components/tabs/ ）似乎已經具有該功能。

遺憾的是，我並沒有真正獲得我現在使用的普通 vue 路由器與 vue-material 示例中的自動路由之間的鏈接。

我的舊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

有一個似乎仍然出現的錯誤。