时间戳

首页 > 解决方案 > 如何将两个组件应用于视图中的单个路由器？

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

问题描述

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

标签： springvue.js

解决方案

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

推荐阅读