如何正确将vue-materials标签路由器与vue-router一起使用?

时间:2019-01-16 15:07:37

标签: javascript vue.js vue-material

我想将Vue项目中的vue材质选项卡用作项目中的主要导航元素。标准标签(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”。

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

希望您能告诉我我哪里错了。可能是我在的“ to”参数中导航到错误的路径,或者是我用Vue路由器执行了我不应该使用vue材质做的事情。

非常感谢! 我对Vue还是很陌生

1 个答案:

答案 0 :(得分:2)

将vue-router降级到3.0.1解决了该问题。证明:

https://codesandbox.io/s/oxlryzvzl9

似乎还有bug出现。