How do I display content based on the menu chosen with vuetify? - vue.js

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

Answer 1

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