Laravel 10集成Vue.js 3路由视图切换故障求助

错误原因分析 #

报错Component is missing template or render function. at <MyComponent>以及MyComponent未定义，根源在于：

• /resources/js/app.js中错误地将Vue Router实例注册为my-component组件，Router实例并非Vue组件，本身没有模板或渲染函数；
• Blade模板中使用了未实际定义的<my-component>标签。

修复步骤 #

1. 修正app.js的根应用配置 #

移除错误的组件注册代码，让根应用直接通过<router-view>渲染路由匹配的内容：

import './bootstrap';
import router from '@/router'
import store from '@/store'
import { createApp } from 'vue/dist/vue.esm-bundler';

// 定义包含路由出口的根组件
const app = createApp({
  template: '<router-view></router-view>'
})

app.use(router)
app.use(store)

app.mount('#app')

2. 调整Blade模板的根容器 #

删除未定义的<my-component>标签，仅保留Vue挂载的根容器：

<!DOCTYPE html>
...
<body>
  <div id="app"></div>
</body>
</html>

3. 修正Dashboard子路由路径（必要优化） #

原路由配置中，父路由/dashboard的子路由路径为/dashboard，会导致实际访问路径变为/dashboard/dashboard，需修改为：

// 在/resources/js/router/index.js的dashboard子路由中
{
  name: "dashboard",
  path: "", // 空路径表示匹配父路由/dashboard时渲染该子组件
  component: () => import('@/components/Dashboard.vue'),
  ...
}

4. 修复Dashboard组件的未定义变量 #

Dashboard.vue中使用了this.user但未在data中声明，需补充变量定义：

export default {
  name:"dashboard",
  data(){
    return {
      user: null // 声明user变量
    }
  },
  mounted() {
    axios.get('api/user/1').then( (res) => {
      this.user = res.data
    })
  }
}

验证修复 #

执行npm run dev重新编译前端资源，刷新页面后即可正常访问Home和Dashboard页面，报错信息消失。

内容的提问来源于stack exchange，提问作者behroz