【问题标题】：Nested routes not rendering in router-view嵌套路由未在路由器视图中呈现
【发布时间】：2019-10-09 20:46:13
【问题描述】：

我正在建立一个大型系统，因此我希望每个模块都有分散的 router.js 文件。他们每个人都有路由数组声明，这些声明将被推送到主路由数组。

所以现在我有一种路由文件的根目录，其中包含 VueRouter 实例和设置，它导入第一级 route.js 文件来构建路由数组。

主路由.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，其中模板编译器不可用。要么将模板预编译为渲染函数，要么使用编译器包含的构建。

【问题讨论】：

可能是因为{ template: '<router-view/>' } 是一个匿名组件？尝试向其添加name
我不完全确定您的问题或问题是什么。您是否真的看到了任何问题，或者您只是对组件的命名感到困惑？
@Phil 我尝试使用<router-view></router-view> 也没有工作，这是我在类似问题中看到的解决方案，但对我没有用。问题是组件没有被渲染，但我知道路由器正在工作，因为我有一个路由对象的观察者在导航中显示标题并且它正在工作
您是否导航到正确的路线，即/panel/inventario/productos-servicios？另外，我会将* 路由移动到路由定义的最后。见router.vuejs.org/guide/essentials/…。事实上，这可能是你的问题
就像我说的，路由器正在将我重定向到正确的路由，我在显示标题上看到我在另一个监视路由更改的组件中。问题是它没有被渲染的组件

标签： vue.js vue-router nested-routes

【解决方案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)
  }
}

【讨论】：

非常感谢兄弟，我自己想通了，但感谢您的帮助

【解决方案2】：

显然现在您不能将路由指向像{template:'<router-view/>} 这样的内联组件，我的解决方案是使用该模板创建一个加载器组件并在父路由上使用它

【讨论】：