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

Posted

技术标签:

【中文标题】如何使用 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 你能查到它的当前版本吗?当我不使用内容时,图表都在侧边栏下?我该怎么办? 您是否尝试过将侧边栏组件放入图表中?

以上是关于如何使用 vue-router 在另一个组件内显示组件并在其间导航?的主要内容,如果未能解决你的问题,请参考以下文章

在另一个组件内绘制组件

如何在另一个 div 内动态改变宽度的 div 上居中文本?

使用Vue-Router时如何在组件之间传递数据

vue-router之路由钩子(组件内路由钩子必须在路由组件调用,子组件没用)

vue-router (两种路由模式编程式/组件式如何传参(优缺点))

如何在另一个文件中使用 vue 路由器?