Vue 嵌套路由未渲染

Question

我有一个嵌套路由未呈现并抛出错误：

vue.esm.js?efeb:571 [Vue warn]: Failed to mount component: template or render function not defined.

found in

---> <BlEditOrder>
       <BlOrders> at src\components\orders\Orders.vue
         <VContent>
           <VApp>
             <App> at src\App.vue
               <Root>

路线：

{
      path: '/orders',
      name: 'orders',
      component: Orders,
      beforeEnter: Auth,
      children: [
        { path: '', component: OrdersList },
        {
          path: 'new',
          name: 'newOrder',
          component: NewOrder
        },
        {
          path: ':id',
          name: 'editOrder',
          component: EditOrder,
          props: true
        }
      ]
    }

EditOrder.vue:

<template>
<h1>Edit Order</h1>
</template>
<script>
export default {
  name: 'blEditOrder',
  props: ['id'],
  data: function() {
    return {
    }
  },
  created() {
    console.log('this.id', this.id);
  }
}

</script>

Orders.vue

<template>
  <router-view></router-view>
</template>

<script>
export default {
  name: 'blOrders',
  data: function() {    
    return {}
  },
  methods: {}
}
</script>

<style scoped>

</style>

OrdersList 渲染得很好，但是当我转到 order/new 或 orders/1234 时出现上述错误。

我确实看到了日志语句，它记录了 1234。

我不知道怎么了:(

Answer 1

终于明白了，问题是我将脚本提取到另一个文件：

<script src="./new">
</script>

并且由于我的 vue 文件名为 New.vue，而我的 js 名为 new.js，webpack 感到困惑并且没有正确导入它们。

Vue 嵌套路由未渲染

Vue nested route not rendered

vue.js

vue-router

vuejs2