How to display component inside another component and navigate between by using vue-router?

0
votes

I managed to implement the project on Vue. Now there are some other problems occured. I want this dashboard to be a single page application. Now I have four main components in the main page which are Navbar.vue, Sidebar.vue, Content.vue and Footer.vue

There is no problem and I can use all of them in the App.vue but for now my Content.vue component is empty and I want some contents to be appear in that blank content page when the user clicks the links from the sidebar. I know that I need to use vue-router at this point. I have no problem implementing and using vue-router but I am not able to display my content in the Content.vue component.

Here is my App.vue looks like

<template>
  <div id="app">
    <Navbar></Navbar>
    <Sidebar></Sidebar>
    <Content></Content>
    <Footer></Footer>
  </div>
</template>

<script>
import Navbar from './components/Navbar.vue'
import Sidebar from './components/Sidebar.vue'
import Content from './components/Content.vue'
import Footer from './components/Footer.vue'


export default {
  name: 'App',
  components: {
    Navbar,
    Sidebar,
    Content,
    Footer
  }
}
</script>

I tried to put the tags in tags and arranged the vue-router based as follows;

import Chart from "./components/charts/Chart";

export const routes = [
    { path : '/chart', component : Chart}
];

I also arranged the main.js file so there is no problem using vue-router for sure. For the test part I created a Chart.vue component and put a div and a paragraph inside of it. I am currently working on localhost and I thought that I can display the Chart.vue component inside Content.vue component by addressing http://localhost:8080/chart. But the app still gives me my main page. What am I missing?

2
vue.jscomponentsvue-router
Putting <route-view> tags inside of <Content></Content> did not work. - Yasin Demirkaya
The other components(Navbar,Sidebar,Footer) are working? To use the router you have created u must use <router-view></router-view> in <div id=app></div - tufonas
All the components are working, the page looks exactly as it should be. I just want to other contents like Charts, Graphs etc to appear in the Content.vue so I thought it is the correct way putting <router-view></router-view> inside <Content></Content> So what should I do? I have a Chart.vue file and there are some stuff inside but I can't display them inside my Content.vue - Yasin Demirkaya
One possible way to do what you want is to use only <router-view></router-view> in <div id=app></div>,then set to the routes Chart.vue and all the other stuffs(Navigation,content... are not needed).And use Navbar, Sidebar,Content and Footer inside your components(Chart.vue,etc) which are mentioned in routes. - tufonas
So when the path is '/' I should load my main components { path : '', component : 'Navbar'}, like this and in the App.vue there will be only <router-view></router-view> but when the path is /chart I will load the Chart.vue component. Is it correct? - Yasin Demirkaya

2 Answers

0
votes

You imported vue-router in main.js??

Something like:

import VueRouter from 'vue-router';

Vue.use(VueRouter)

0
votes

You dont need content component. Your content component will be replaced by your routes. And your routes will be something like this:

{ path : '/chart', component : Chart}
{ path : '/whateverPageYouWant', component: WhateverPageYouWant}

<template>
  <div id="app">
    <Navbar></Navbar>
    <Sidebar></Sidebar>
    <router-view><router-view>
    <Footer></Footer>
  </div>
</template>
<script>
import Navbar from './components/Navbar.vue'
import Sidebar from './components/Sidebar.vue'
import Content from './components/Content.vue'
import Footer from './components/Footer.vue'


export default {
  name: 'App',
  components: {
    Navbar,
    Sidebar,
    Footer
  }
}

</script>