嵌套路由未在路由器视图中呈现

Question

我正在设置一个大型系统，所以我想为每个模块都设置分散的router.js文件。他们每个人都有将被推送到主路由数组的路由数组声明。

因此，到目前为止，我有一个路由文件的根目录，它具有VueRouter实例和设置，并且它导入了route.js文件的第一级以构建路由数组。

主要的route.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的仅运行时版本，而模板编译器不可用。可以将模板预编译为渲染函数，也可以使用编译器附带的内部版本。

Answer 1

  

您正在使用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)
  }
}

Answer 2

显然，现在您无法将路由指向诸如{template:'<router-view/>}之类的内联组件，而我的解决方案是使用该模板创建一个加载器组件，并将其用于父级路由