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

Posted 2023-02-23

【中文标题】如何使用 vue-router 在另一个组件内显示组件并在其间导航？

【英文标题】：How to display component inside another component and navigate between by using vue-router?

【发布时间】：2021-02-09 15:08:30

【问题描述】：

我设法在 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 组件。但是该应用程序仍然给了我我的主页。我错过了什么？

【问题讨论】：

将 标签放在 内不起作用。

其他组件（导航栏、侧边栏、页脚）是否正常工作？要使用您创建的路由器，您必须在

中使用

所有组件都在工作，页面看起来完全正常。我只想让其他内容（如图表、图表等）出现在 Content.vue 中，所以我认为将 放入 是正确的方法 那我应该怎么做做？我有一个 Chart.vue 文件，里面有一些东西，但我无法在我的 Content.vue 中显示它们

一种可能的方法是在 中仅使用 ，然后设置为路线图表。 vue 和所有其他东西（不需要导航、内容...）。并在路由中提到的组件（Chart.vue 等）中使用导航栏、侧边栏、内容和页脚。

所以当路径是 '/' 我应该加载我的主要组件 path : '', component : 'Navbar'，像这样在 App.vue 中只有 但当路径为 /chart 时，我将加载 Chart.vue 组件。对吗？

【参考方案1】：

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

类似：

从'vue-router'导入VueRouter；

Vue.use(VueRouter)

【讨论】：

是的，我做到了。我还创建了一个 routes.js 文件，并将其导入到 main.js 中。我也做了那个 Vue.use(VueRouter);也。可以用like吗； 路由器视图> 内容>

我认为你应该只使用 并将内容组件作为根目录放在路由器中： path : '/', component : Content

我只是按照你说的做了 path : '', component : 'Navbar', path : '', component : 'Sidebar', path : '', component : 'Content ', path : '', component : 'Footer' l 但是当我这样做时它给了我错误'Navbar' is defined but never used no-unused-vars

不，在路由器中您只放置页面中更改的组件。在 中，它将根据您所在的路线更改为 或 。您不应将导航栏或页脚放在那里

【参考方案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>

【讨论】：

我明白了。现在尝试这样做。我会让你知道。谢谢。

我照你说的做了。现在我没有 Content 组件。正如你所说，我放置了一个图表组件，它起作用了。现在当链接是 ocalhost:8081/chart 它给了我我想要的。但是有一个小问题。当我使用 Content.vue 时，里面有面包屑。现在我没有那个组件，我应该把面包屑放在哪里？

您可以在 中使用它，就像在导航栏、侧边栏或每个路由组件中一样

resminiz.com/r/ow1s 你能查到它的当前版本吗？当我不使用内容时，图表都在侧边栏下？我该怎么办？

您是否尝试过将侧边栏组件放入图表中？