Вложенные маршруты не отображаются в режиме роутера - PullRequest
Новая
       39

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

3 голосов
/ 09 октября 2019

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

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

основной файлways.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
  )
})

модуль (первый уровень) файл rout.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

Компоненты (второй уровень) файл rout.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 в том месте, где должен быть вид моего роутера у моих детей.

Обновление

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

Компоненты (второй уровень). route.js file 

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 только во время выполнения, когда компилятор шаблона недоступен,Либо предварительно скомпилируйте шаблоны в функции рендеринга, либо используйте компилятор, включенный в сборку.

Ответы [ 2 ]

2 голосов
/ 12 октября 2019

Вы используете сборку 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)
  }
}
0 голосов
/ 12 октября 2019

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

...