laravel - 无法解析组件 : router-link and router-view

Question

router-view 和 router-link 组件无法在我的应用中解析不知道是什么问题

附上应用代码它是一个主页应用程序，带有类似 navbar 的东西，用于路由到 vue 组件，如 states

应用\资源\js\router.js

import States from './components/States.vue'
import Cities from './components/Cities.vue'
import Areas from './components/Areas.vue'
import Addresses from './components/Addresses.vue'

const router =createRouter({
    history:createWebHistory,
    routes :[
        {
            name:'states',
            path:'/states',
            Commponent: States
        },
        {
            name:'cities',
            path:'/cities',
            Commponent: Cities
        },
        {
            name:'areas',
            path:'/areas',
            Commponent: Areas
        },
        {
            name:'addresses',
            path:'/addresses',
            Commponent: Addresses
        }
    ]
})

export default new VueRouter({
    router
});

应用\资源\js\app.js

import App from './components/App.vue'
import router from './router'
import VueAxios from 'vue-axios'
import axios from 'axios'

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

应用\资源\js\组件\App.vue

  <div class="container">
        <h2>welcome to vue</h2>
        <div class="navbar-nav">
            <router-link to="/states">States</router-link>
            <router-link to="/cities">Cities</router-link>
            <router-link to="/areas">Areas</router-link>
            <router-link to="/addresses">Addresses</router-link>
        </div>.
        <router-view />
    </div>
</template>

<script>
export default {

}
</script>

<style>

</style>

C:\Users\Kareem\App\resources\js\components\States.vue

  <h3>welcome to states component</h3>
</template>

<script>
export default {

}
</script>

<style>

</style>

Answer 1

在 Vue3 中这样尝试:

import { createApp } from "vue";

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