javascript - Vue材质选项卡不切换

Question

我试图在 vue 材料上使用选项卡来拥有几个选项卡，当用户单击它时，它们将在同一页面中切换。目前第一个选项卡显示内容，但是当我点击其他选项卡时，它只显示为空。

<template>
  <div class="content">
  <md-tabs md-sync-route>
      <md-tab id="tab-home" md-label="Home" to="/home" >
        Home Tab
      </md-tab>
      <md-tab id="tab-pages" md-label="Pages" to="/foo">
        Pages tab
        <p>Unde provident nemo reiciendis officia, possimus repellendus. Facere dignissimos dicta quis rem. Aliquam aspernatur dolor atque nisi id deserunt laudantium quam repellat.</p>
      </md-tab>

    </md-tabs>

    </div>
  </div>
</template>

<script>
export default {
  name: 'TabContent'
}
</script>

<style>
.md-tabs-navigation{
background: linear-gradient(60deg,#ec407a,#d81b60);
}
</style>

编辑：我还添加了 vue 材料示例https://codesandbox.io/s/48m3qrvmo4?module=App.vue