vue.js - 嵌套路由未在路由器 View 中呈现

Question

我正在设置一个大型系统，所以我希望每个模块都有分散的 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 在我 child 的 router-view 应该在的地方。

更新

我只是创建了一个外部组件来命名它并检查它是否被渲染成这样

组件(二级)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 组件，但我仍然没有看到我的子组件在其中呈现

更新

我在控制台上看到这个错误

You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functions, or use the compiler-included build.

Answer 1

You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functions, or use the compiler-included build.

默认情况下，Vue 不编译字符串模板。这是出于性能原因。

Since the runtime-only builds are roughly 30% lighter-weight than their full-build counterparts, you should use it whenever you can

参见 https://v2.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)
  }
}