[Vuejs]-How to apply two components to a single router in a view?

by

0👍

✅

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')
        }
    ]
})

Now 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>
👤Brian Lee

Leave a comment