Question

使用Vue材质选项卡从选项卡中选择页面时，程序必须显示该页面。我已经配置了路由并安装了依赖项，但是当我单击选项卡时未显示。该代码具有两个Vue组件，可以测试两个屏幕的内容。想法是在视图顶部显示类似工具栏的行，并在其中填充标签。这两个屏幕分别是Menu和Home。

App.vue

<template>
  <div>
     <md-tabs md-sync-route>
       <md-tab id="tab-home" md-label="Home" to="/components/Home" exact></md-tab>
       <md-tab id="tab-pages" md-label="Pages" to="/components/Menu"></md-tab>
     </md-tabs>
    <router-view/>
  </div>
</template>

<script>
  export default {
   name: 'App',
  }
</script>

index.js

import Vue from 'vue'
import Router from 'vue-router'
import Home from '@/components/Home'
import Menu from '@/components/Menu'

import VueMaterial from 'vue-material'
import 'vue-material/dist/vue-material.min.css'
import 'vue-material/dist/theme/default.css'

Vue.use(VueMaterial)
Vue.use(Router)

export default new Router({
    mode: 'history',
    routes: [
        {
            path: '/',
            name: 'Home',
            component: Home
        },
        {
            path: '/Home',
            name: 'Home',
            component: Home
        },
        {
            path: '/Menu',
            name: 'Menu',
            component: Menu
        },
    ]
})

Menu.vue

<template>
   <div>
       <h1>Menu</h1>
   </div>
</template>

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

Home.vue

<template>
  <div>
    <h1>Home</h1>
  </div>
</template>

<script>
  export default {
    name: 'Home',
  }
</script>

Answer 1

您的路由器配置中没有路径为/components/Home和/components/Menu的路由。因此，请提供正确的路径。

<md-tab id="tab-home" md-label="Home" to="/Home" exact></md-tab>
<md-tab id="tab-pages" md-label="Pages" to="/Menu"></md-tab>

Vue材质选项卡不显示内容

1 个答案: