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

Posted 2023-02-22

【中文标题】如何根据使用 vuetify 选择的菜单显示内容？

【英文标题】：How do I display content based on the menu chosen with vuetify?

【发布时间】：2020-02-01 12:49:17

【问题描述】：

我从这里得到参考：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
          
        ></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>

但都是一样的

【参考方案1】：

您的代码中没有<router-view></router-view> 组件。这个特定的组件负责渲染提供的路由中的任何内容。

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

【讨论】：

我使用 vuetify。似乎没有必要使用路由器视图。请适应我的情况

为什么你认为如果使用 Vuetify 就不需要<router-view></router-view>？我自己使用 Vuetify 已经有一段时间了，如果我使用的是 Vue-router，我总是将它与相应的渲染组件一起使用。

试试看这里：***.com/questions/46710477/…。似乎它没有使用路由器视图

这个问题是关于<v-tabs> 组件，而不是关于浏览不同的页面。

我很困惑。请适应我的情况