Question

我现在正在学习vue编程。我现在正在尝试将dhtmlx提供的甘特图代码应用于我的vue项目。在该示例中，甘特图创建代码分为两个文件，其中一个代码编写在App.vue中。如果这样做，您将在每个屏幕上看到“甘特图”，因此，我只想在进入网站上的“甘特图”选项卡时才可见。我认为您需要在一个路由器上使用两个组件来执行此操作，您该怎么做？

Answer 1

甘特组件只是被导入到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>

如何在视图中将两个组件应用于单个路由器？

1 个答案: