vue.js - 如何根据使用 vuetify 选择的菜单显示内容？

问题描述

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

我运行 vue create my-app、vue add vuetify 和 npm run serve

我的 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 改变了，但是内容没有改变。我该如何解决这个问题？

更新：

我尝试这样：

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

但它是一样的

标签： vue.jsvue-componentvuexvue-routervuetify.js

vue.js - 如何根据使用 vuetify 选择的菜单显示内容？

问题描述

解决方案

推荐阅读