How do I display content based on the menu chosen with vuetify?

Question

I get reference from here : https://vuetifyjs.com/en/getting-started/quick-start

I run vue create my-app, vue add vuetify and npm run serve

My App.vue like this :

<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>

My router.js like this :

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')
    }
  ]
})

My Home.vue like this :

<template>
  <HelloWorld />
</template>

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

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

My HelloWorld.vue like this :

<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 like this :

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

My Contact.vue like this :

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

I want when content is displayed based on the selected menu. For example when the user selects the about menu, it displays content from the about menu. I try like that. The url changes, but the content does not change. How do I solve this problem?

Update :

I try like this :

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

But it's the same

score 0 · Answer 1 · answered Oct 03 '19 at 08:31

0

You have no <router-view></router-view> component anywhere in your code. This particular component is responsible for rendering any content in the provided route.

Check for the right example here: https://codesandbox.io/s/qx3orn736q

answered Oct 03 '19 at 08:31

Justice47

682
6
16

I use vuetify. It seems that there is no need to use router view. Please adjust to my case – moses toh Oct 03 '19 at 08:37
Why do you think that there is no need for `` if using Vuetify? I'm using Vuetify myself for a quite time right now, and If I'm using Vue-router I'm using it always with corresponding render component. – Justice47 Oct 03 '19 at 08:40
Try to see here : https://stackoverflow.com/questions/46710477/vue-vuetify-how-to-add-router-link-to-tab. Seems it does not using router view – moses toh Oct 03 '19 at 08:51
This question about `` component, not about surfing through different pages. – Justice47 Oct 03 '19 at 09:02
I'm confused. Please adjust to my case – moses toh Oct 03 '19 at 09:04
What do you not understand at the https://codesandbox.io/s/qx3orn736q link? As I see what you are trying to achieve is a few simple pages which can be navigated through Vue-router. Exactly that concept is located at the link above. – Justice47 Oct 03 '19 at 09:27

How do I display content based on the menu chosen with vuetify?

1 Answers1