динамический импорт компонентов на основе маршрута - PullRequest
Новая
       12

динамический импорт компонентов на основе маршрута

0 голосов
/ 08 апреля 2019

Я новичок в VueJS и не нашел возможности загружать компоненты на основе маршрута.Например: page /: pageid page / одна страница / две

У меня есть компонент Page.vue В этом компоненте я наблюдаю изменения маршрута.Если для маршрута задан $ pageid, импортируйте и загрузите компонент $ pageid.

Я прочитал эту документацию: https://vuejs.org/v2/guide/components-dynamic-async.html. Но это больше сфокусировано на отложенной загрузке.Я не вижу пример для динамического импорта и загрузки.

С уважением, Питер

Ответы [ 2 ]

0 голосов
/ 09 апреля 2019

Vue позволяет вам определить ваш компонент как фабричную функцию, которая асинхронно разрешает определение вашего компонента.

Поскольку import() возвращает обещание, вы можете зарегистрировать свой асинхронный компонент, используя: 

export default {
  components: {
    'Alfa': () => import('@/components/Alfa'),
    'Bravo': () => import('@/components/Bravo'),
    'Charlie': () => import('@/components/Charlie')
  }
}

Vue активирует фабричную функцию только тогда, когда компонент должен быть визуализирован, и будет кэшировать результат для будущих повторных визуализаций.

Итак, ваш компонентбудет загружаться только тогда, когда это необходимо для рендеринга.

И вы можете использовать динамический компонент для его рендеринга, используя: 

<component :is='page'/>

и 

export default {
  computed: {
    page () {
      return 'Alfa'
    }
  }
}

Если выуже используя vue-router, вы можете напрямую использовать это в определении маршрутов.Подробнее см. В документе здесь . 

const router = new VueRouter({
  routes: [{
    path: '/alfa',
    component: () => import('@/components/Alfa')
  }, {
    path: '/bravo',
    component: () => import('@/components/Bravo')
  }, {
    path: '/charlie',
    component: () => import('@/components/Charlie')
  }]
})

Как вы можете видеть, это динамический импорт, но статическая регистрация (необходимо указать путь к компоненту.), Которая подходит в большинстве случаев.Но если вы хотите использовать динамическую регистрацию, вы можете вернуть компонент напрямую вместо имени, см. Документ здесь . 

export default {
  computed: {
    page () {
      return () => import('@/components/Alfa')
    }
  }
}
0 голосов
/ 09 апреля 2019

В соответствии с Dynamic Route Matching vue router, вы можете получить доступ к параметрам url через свойство params объекта $route.В вашем случае это будет $route.params.pageid, поэтому вы можете использовать его для динамического изменения базы контента по параметру pageid в URL.Также обратите внимание, что при изменении URL с скажем, в вашем случае page/one на page/two будет использоваться тот же компонент, поэтому вам придется наблюдать за изменением объекта $route и динамически изменять содержимое.

watch: {
  '$route' (to, from) {
    // react to route changes...
  }
}
...