無法解析組件：router-link 和 router-view

Question

router-view和router-link組件無法在我的應用程序中解決 我不知道問題是什么

附加應用程序代碼它是一個主頁應用程序，帶有navbar之類的東西，可以路由到states等 vue 組件

應用\資源\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')