如何将两个组件应用于视图中的单个路由器？
如何将两个组件应用于视图中的单个路由器？
提问于 2018-09-16 04:42:09
我现在正在学习vue编程。我现在正在尝试将dhtmlx提供的甘特图代码应用到我的vue项目中。在这个示例中，甘特图创建代码被分成两个文件，其中一个代码是用App.vue编写的。如果您这样做，您将看到甘特图在每个屏幕上，所以我想要使它可见，只有当我进入甘特图选项卡在我的网站。我认为你需要在一个路由器上使用两个组件来完成这个任务，你是如何做到的？
回答 1
Stack Overflow用户
回答已采纳
发布于 2018-09-16 04:52:14
甘特组件只是简单地导入到App.vue中。您可以安全地将任何引用移动到所需的任何其他.vue组件中。如果您有下列路线：
const router = new Router({
routes: [
{
path: '/foo',
component: () => import('./pages/Foo.vue')
},
{
path: '/bar',
component: () => import('./pages/Bar.vue')
}
]
})现在将甘特图导入Foo.vue或Bar.vue，就像在示例的App.vue中所做的那样
Foo.vue
<template>
<gantt class="left-container" :tasks="tasks" @task-updated="logTaskUpdate" @link-updated="logLinkUpdate" @task-selected="selectTask"></gantt>
</template>
<script>
import Gantt from './components/Gantt.vue'
export default {
name: 'foo',
components: {Gantt},
...
// rest of Foo.vue component...
...
</script>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/52351009
复制相关文章
相似问题
腾讯云开发者
