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嵌套路线未呈现

1 个答案: