Как отобразить контент на основе меню, выбранного с помощью vuetify? - PullRequest
Новая
       36

Как отобразить контент на основе меню, выбранного с помощью vuetify?

0 голосов
/ 03 октября 2019

Я получаю ссылку отсюда: 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>

My About.vue вот так: 

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

My 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 Ответ

0 голосов
/ 03 октября 2019

В вашем коде нет компонента <router-view></router-view>. Этот конкретный компонент отвечает за рендеринг любого содержимого в указанном маршруте.

Проверьте правильный пример здесь: https://codesandbox.io/s/qx3orn736q

...