[Vue 警告]：无法解析组件：Laravel 中的路由器视图

Question

使用 vue 3 和 laravel 项目。 当我加载 welcome.blade.php 时，它也只查看 mainapp.vue 并且看不到其他 vue.js 文件。 检查员遇到以下错误消息[Vue warn]: Failed to resolve component: router-view If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement. at <Mainapp> at <App> If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement. at <Mainapp> at <App>

我的应用程序.js

require('./bootstrap');
import { createApp } from 'vue';
import mainapp from './components/mainapp.vue';
createApp({
    components: {
        mainapp,
        
    }
    
}).mount('#app');

路由器.js

import firstPage from './components/pages/myFirstVuePage.vue';
import newRoutePage from './components/pages/newRoutePage.vue';
import { createRouter, createWebHistory } from "vue-router";

const ROUTES = {
  MyNewVueRoute: {
    path: '/my-new-vue-route',
    name: 'MyNewVueRoute',
    component: firstPage
  },
  NewRoutePage: {
    path: '/new-route-page',
    name: 'NewRoutePage',
    component: newRoutePage
  }
}
const router = createRouter({
  history: createWebHistory(),
  routes: [
    // feel free to add more routes here (yeah, and your root '/' route too :) )
    {
      path: ROUTES.MyNewVueRoute.path,
      name: ROUTES.MyNewVueRoute.name,
      component: ROUTES.MyNewVueRoute.component

    },
    {
      path: ROUTES.NewRoutePage.path,
      name: ROUTES.NewRoutePage.name,
      component: ROUTES.NewRoutePage.component
    },
  ]
});

export default router;

我该如何解决这个问题？

Answer 1

import { createApp } from "vue";

createApp(App)
  .use(VueAxios, axios)
  .use(router)
  .mount('#MyApp')

Answer 2

最后我以这种方式得到了 app.js 现在它工作正常

require('./bootstrap');
import router from './router'

import { createApp } from 'vue';

import mainapp from './components/mainapp.vue';




createApp({
    components: {
        mainapp,
    }
    
}).use(router).mount('#app');