Problems with laravel vue routing definition

use laravel mix to do vue contact projects. Encountered a problem while using vue-router

< H2 > Project structure < / H2 >

router.js

foo.vue

app.js

home.html

component

what is my problem? thank you for correcting
all the source codes have been sent to Ciyun: the specific address is as follows:
https://gitee.com/blueroad_ma...

Laravel vue.js vue-router

May.11,2022

move this section to app.js

 // 
 const routes=[
     {
        path:"/foo",
        name:"foo",
        component: Vue.component( 'foo', require( './pages/foo.vue' ))
    },
    {
        path:"/bar",
        name:"bar",
        component: Vue.component( 'bar', require( './pages/bar.vue' ))
    }
 ];

change to

 // 
 const routes=[
     {
        path:"/foo",
        name:"foo",
        component: require( './pages/foo.vue' ).default
    },
    {
        path:"/bar",
        name:"bar",
        component: require( './pages/bar.vue' ).default
    }

Previous: Can the front-end developer js break points?

Next: Docker installation swoft specified mount directory error