如何使用 vue-router 在另一个组件内显示组件并在其间导航？

Question

我设法在 Vue 上实现了这个项目。现在出现了一些其他问题。我希望这个仪表板是一个单页应用程序。现在我在主页中有四个主要组件，分别是 Navbar.vue、Sidebar.vue、Content.vue 和 Footer.vue

没有问题，我可以在 App.vue 中使用所有这些，但是现在我的 Content.vue 组件是空的，我希望当用户单击来自侧边栏。我知道此时我需要使用 vue-router。我实现和使用 vue-router 没有问题，但我无法在 Content.vue 组件中显示我的内容。

这是我的 App.vue 的样子

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

我尝试将标签放在标签中，并根据如下安排vue-router；

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

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

我还整理了 main.js 文件，所以使用 vue-router 肯定没有问题。对于测试部分，我创建了一个 Chart.vue 组件并在其中放置了一个 div 和一个段落。我目前正在处理 localhost，我认为我可以通过寻址 http://localhost:8080/chart 在 Content.vue 组件中显示 Chart.vue 组件。但是该应用程序仍然给了我我的主页。我错过了什么？

Answer 1

你在 main.js 中导入了 vue-router？？

类似：

从'vue-router'导入VueRouter；

Vue.use(VueRouter)

Answer 2

您不需要内容组件。您的内容组件将被您的路线替换。 您的路线将是这样的：

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