如何根据通过vuetify选择的菜单显示内容?

问题描述 投票:-1回答:1

我从这里获得参考:https://vuetifyjs.com/en/getting-started/quick-start

我运行vue创建我的应用,vue添加vuetify和npm运行服务

我的App.vue这样:

<template>
  <v-app>
    <v-app-bar app>
      <v-toolbar-title class="headline text-uppercase">
        <span>Vuetify</span>
        <span class="font-weight-light">MATERIAL DESIGN</span>
      </v-toolbar-title>

      <v-spacer></v-spacer>

      <v-btn
        v-for="link in links"
        :key="link"
        text
        rounded
        class="my-2"
        :to="'/'+link"
      >
      {{ link }}
      </v-btn>

      <v-spacer></v-spacer>

      <v-btn
        text
        href="https://github.com/vuetifyjs/vuetify/releases/latest"
        target="_blank"
      >
        <span class="mr-2">Latest Release</span>
      </v-btn>
    </v-app-bar>

    <v-content>
      <HelloWorld/>
    </v-content>
  </v-app>
</template>

<script>
import HelloWorld from './components/HelloWorld';

export default {
  name: 'App',
  components: {
    HelloWorld,
  },
  data: () => ({
    links: [
      'home',
      'about',
      'contact',
    ]
  }),
};
</script>

我的router.js就像这样:

import Vue from 'vue'
import Router from 'vue-router'
import Home from './views/Home.vue'

Vue.use(Router)

export default new Router({
  mode: 'history',
  base: process.env.BASE_URL,
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home
    },
    {
      path: '/about',
      name: 'about',
      component: () => import('./views/About.vue')
    },
    {
      path: '/contact',
      name: 'contact',
      component: () => import('./views/Contact.vue')
    }
  ]
})

我的Home.vue这样:

<template>
  <HelloWorld />
</template>

<script>
import HelloWorld from '../components/HelloWorld';

export default {
  components: {
    HelloWorld,
  },
};
</script>

我的HelloWorld.vue这样:

<template>
  <v-container>
    <v-layout
      text-center
      wrap
    >

      <v-flex xs12>
        <v-img
          :src="require('../assets/logo.svg')"
          class="my-3"
          contain
          height="200"
        ></v-img>
      </v-flex>

      <v-flex mb-4>
        <h1 class="display-2 font-weight-bold mb-3">
          Welcome to Vuetify ss
        </h1>
        <p class="subheading font-weight-regular">
          For help and collaboration with other Vuetify developers,
          <br>please join our online
        </p>
      </v-flex>

    </v-layout>
  </v-container>
</template>

<script>
export default {
  data: () => ({
  }),
};
</script>

我的About.vue这样:

<template>
  <div class="about">
    <h1>This is an about page</h1>
  </div>
</template>

我的Contact.vue这样:

<template>
  <div class="contact">
    <h1>This is an contact page</h1>
  </div>
</template>

我希望基于所选菜单显示内容。例如,当用户选择About菜单时,它将显示About菜单中的内容。我这样尝试。 url更改,但内容未更改。我该如何解决这个问题?

vue.js vue-component vuex vue-router vuetify.js
1个回答
0
投票
您在代码中的任何地方都没有<router-view></router-view>组件。该特定组件负责呈现所提供路线中的任何内容。

在此处检查正确的示例:https://codesandbox.io/s/qx3orn736q

© www.soinside.com 2019 - 2024. All rights reserved.