Вложенные маршруты не отображаются в режиме просмотра маршрутизатора

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

Итак, на данный момент у меня есть своего рода корень файла маршрутов, в котором есть VueRouter экземпляры и настройки, и он импортирует первый уровень файлов route.js для создания массива маршрутов.

основной файл routes.js

import DashboardRoutes from './views/dashboard/routes'

Vue.use(Router)

export default new Router({
  mode: 'history',
  base: process.env.BASE_URL,
  routes: [
    {// Root public site
      path: '/',
      component: () => import('./views/pages/Index'),
      children: PagesRoutes
    },
      name: 'page_error',
      path: '*',
      component: () => import('./views/error/Error')
    }
  ].concat(
    DashboardRoutes
  )
})

модуль (первый уровень) файл routes.js

import InventoryRoutes from './inventarios/routes'

const routes = {
  path: '/panel',
  component: () => import('./Index'), // This Index has a layout with a router-view in it
  children: [
    // Inicio del panel
    {
      name: 'dashboard',
      path: '',
      component: () => import('./Dashboard'),
    }
  ].concat(
    InventariosRoutes
  )
}

export default routes

Компоненты (второй уровень) файл routes.js

const routes = {
  path: 'inventario',
  name: 'panel_inventario',
  component: { template: '<router-view/>' },
  children: [
    // Productos y servicios
    {
      name: 'panel_inventarios_productos-servicios',
      path: 'productos-servicios',
      component: () => import('./productos-servicios/ProductosServiciosHome'),
    },

  ]
}
export default routes

В дереве компонентов vue-tools я вижу AnnonymousComponent в том месте, где должен быть маршрутизатор моих детей.

Обновлять

Я просто создаю внешний компонент, чтобы назвать его и проверить, отображается ли он так

Компоненты (второй уровень) файл routes.js

const loader = {
  template: `
    <div class="InventarioLoader">
      <router-view></router-view>
    </div>
  `,
  name: 'InventarioLoader'
}

const routes = {
  path: 'inventario',
  name: 'panel_inventario',
  component: loader,
  children: [
    // children go here
  ]
}

Теперь я вижу свой InventarioLoader компонент, но все еще не вижу, чтобы в нем рендерились мои дочерние компоненты.

Обновлять

Я вижу эту ошибку на консоли

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


vue.js vue-router nested-routes
person Arnaldo Perez    schedule 09.10.2019    source источник
comment
Возможно, потому, что { template: '<router-view/>' } анонимный компонент? Попробуйте добавить к нему name   -  person Phil    schedule 10.10.2019
comment
Я не совсем уверен, в чем ваш вопрос или проблема. Вы действительно наблюдаете какие-либо проблемы или просто запутались в названии компонента?   -  person Phil    schedule 10.10.2019
comment
@Phil Я пробовал с <router-view></router-view>, но тоже не сработало, это решение, которое я встречал здесь в подобных вопросах, но у меня оно не сработало. Проблема в том, что компонент не отображается, но я знаю, что маршрутизатор работает, потому что у меня есть наблюдатель для объекта маршрута, чтобы показать заголовок в навигаторе, и он работает   -  person Arnaldo Perez    schedule 10.10.2019
comment
Вы идете по правильному маршруту, т. Е. /panel/inventario/productos-servicios? Кроме того, я бы переместил * маршрут в самый конец определения маршрутов. См. router.vuejs.org. / guide / essentials /. На самом деле это, наверное, твоя проблема   -  person Phil    schedule 10.10.2019
comment
Как я уже сказал, маршрутизатор перенаправляет меня на правильный маршрут, я вижу это в отображаемом заголовке, который есть у меня в другом компоненте, который отслеживает изменения маршрута. Дело в том, что компонент не рендерится   -  person Arnaldo Perez    schedule 11.10.2019

Ответы (2)


arrow_upward
2
arrow_downward

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

По умолчанию Vue не компилирует строковые шаблоны. Это из соображений производительности.

Поскольку сборки, предназначенные только для среды выполнения, примерно на 30% легче, чем их полнофункциональные аналоги, вы должны использовать их всякий раз, когда можете.

См. https://vuejs.org/v2/guide/installation.html#Runtime-Compiler-vs-Runtime-only

Либо создайте реальный однофайловый компонент, либо используйте функцию рендеринга

import Vue from 'vue'

const RouterView = Vue.component('router-view')

const loader = {
  name: 'InventarioLoader',
  render (createElement) {
    return createElement(RouterView)
  }
}
person Phil    schedule 12.10.2019
comment
Большое спасибо, братан, я понял это сам, но я ценю твою помощь - person Arnaldo Perez; 12.10.2019

arrow_upward
0
arrow_downward

По-видимому, теперь вы не можете указать маршрут на встроенный компонент, такой как {template:'<router-view/>}, и мое решение состояло в том, чтобы создать компонент загрузчика с этим шаблоном и использовать его на родительском маршруте.

person Arnaldo Perez    schedule 12.10.2019