Динамическая маршрутизация и создание компонентов на основе маршрута - PullRequest
Новая
       1

Динамическая маршрутизация и создание компонентов на основе маршрута

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

Я хочу иметь пару «обзорных» страниц для разделов моего приложения, которые все будут запускаться в корне этого раздела.

поэтому localhost/hi должен отображать компонент HiOverview

localhost/he должен отображать компонент HeOverview

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

НО я борюсь с созданием Компонентов в хуке beforeEnter. каждый route объект ожидает компонент ... но я просто хочу выбрать компонент в зависимости от маршрута. (sectionsWithOverview - это простой массив строк, содержащий name s маршрутов, где я хочу отображать обзор 

const router = new Router({
  linkActiveClass: 'active',
  mode: 'history',
  routes: [
    { path: '/:section',
      component: Placeholder,
      beforeEnter: (to, from, next) => {
      const section = to.params.section

      // how can i use this in the next() call?   
      // const View = () => import(/* webpackChunkName: 'sectionView' */ `Components/${section}/${section}Overview`)

      if (sectionsWithOverview.includes(to.params.section)) {
        next({ name: `${to.params.section}Overview` })
      } else {
        next()
      }
    },
}

Вы, ребята, можете мне помочь? Как я могу условно назначить компонент onBeforeEnter, а затем направить к этому точному компоненту? это работает, если я заранее объявляю каждый SectionOverview, но это делает мою идею бессмысленной.

Спасибо за любую помощь:)

1 Ответ

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

Я сделал нечто подобное с проектом, но вместо этого я использовал beforeRouteUpdate

Вот пример того, как это работает. На route.js просто определите свой динамический маршрут 

const router = new Router({
  linkActiveClass: 'active',
  mode: 'history',
  routes: [
    { 
      path: '/:section',
      component: Placeholder,
      name: 'placeholder'
    },
}

Затем в вашем компоненте (я полагаю, Placeholder.vue) в HTML добавьте эту строку кода 

<transition name="fade" mode="out-in">
    <component :is="section" key="section"></component>
</transition>

затем в вашем JS добавьте хук beforeRouteUpdate и определите все ваши компоненты, которые будут соответствовать вашему параметру секции маршрута. 

import he from './heOverview.vue'
import hi from './hiOverview.vue'

beforeRouteUpdate (to, from, next) {
  // just use `this`
  this.section = to.params.section
  next()
},
components: {
  he,
  hi
},
data () {
  return {
    section: ''
  }
}

Поэтому, когда пользователь перейдет на localhost/he, будет загружен компонент heOverview.vue. Единственное, что вам нужно убедиться, это то, что значение параметра section должно соответствовать конкретному представлению, если не будет выдано сообщение об ошибке

Если вам нужна дополнительная информация о том, как это работает, прочитайте https://vuejs.org/v2/guide/components-dynamic-async.html https://router.vuejs.org/guide/advanced/navigation-guards.html#in-component-guards

...