How to apply two components to a single router in a view?

1209 views spring
-1

I am now learning vue programming. I am now trying to apply the Gantt chart code provided by dhtmlx to my vue project. In the example, the Gantt chart creation code is divided into two files, and one code is written in App.vue. If you do this, you will see the Gantt Chart on every screen, so I want to make it visible only when I enter the Gantt Chart tab on my site. I think you need to use two components on one router to do this, how do you do that?

answered question

1 Answer

9

The gantt component is simply being imported into App.vue. You can safely move any reference into any other .vue component needed. If you have the following routes:

const router = new Router({
    routes: [
        {
            path: '/foo',
            component: () => import('./pages/Foo.vue')
        },
        {
            path: '/bar',
            component: () => import('./pages/Bar.vue')
        }
    ]
})

Then you can simply import the gantt chart into either Foo.vue or Bar.vue as is done in the example's 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>

posted this

Have an answer?

JD

Please login first before posting an answer.