如何使用 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 组件。但是该应用程序仍然给了我我的主页。我错过了什么?
【问题讨论】:
将你在 main.js 中导入了 vue-router??
类似:
从'vue-router'导入VueRouter;
Vue.use(VueRouter)
【讨论】:
是的,我做到了。我还创建了一个 routes.js 文件,并将其导入到 main.js 中。我也做了那个 Vue.use(VueRouter);也。可以用like吗; 路由器视图> 内容> 我认为你应该只使用您不需要内容组件。您的内容组件将被您的路线替换。 您的路线将是这样的:
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之路由钩子(组件内路由钩子必须在路由组件调用,子组件没用)