Vue嵌套路由未呈现答案

【问题标题】：Vue nested route not renderedVue嵌套路由未呈现
【发布时间】：2023-04-07 15:54:01
【问题描述】：

我有一个未渲染的嵌套路由并引发错误：

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。

我不知道怎么了:(

【问题讨论】：

在您的路线中，您是在导入EditOrder 和require() 还是import？
@DecadeMoon 导入
你能现场演示一下吗？如果可以的话

标签： vue.js vuejs2 vue-router

【解决方案1】：

终于明白了，问题是我把脚本解压到了另一个文件：

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

因为我的vue文件叫New.vue，我的js叫new.js，所以webpack搞糊涂了，没有正确导入。

【讨论】：