Vue Router 似乎无法与 Vue \'^3.5.4\'（最新版本）配合使用。代码如下：Main.jsimport \'bootstrap\';import \'bootstrap/dist/css/bootstrap.css\';import 'vue3-

Vue Router 似乎无法与 Vue \'^3.5.4\'（最新版本）配合使用。代码如下：

Main.js

import "bootstrap";
import "bootstrap/dist/css/bootstrap.css";
import 'vue3-carousel/dist/carousel.css'

import {BootstrapIconsPlugin} from 'bootstrap-icons-vue';

import {createMemoryHistory, createRouter} from 'vue-router'

import { createApp } from 'vue'
import App from './App.vue'


import AboutView from "@/components/AboutView.vue";
import FirstPage from "@/components/Layout.vue";
const routes = [
 { path: '/', name: 'Home', component: FirstPage },
 { path: '/about', name: 'about', component: AboutView },
]

const router = createRouter({
   history: createMemoryHistory(),
   routes,
 })

const app =createApp(App);
app.use(BootstrapIconsPlugin);
app.use(router);

app.mount('#app')

应用程序.vue

 <template>
 <nav-bar></nav-bar>

 <p>Current route path: {{ $route.path }}</p>

 <Footer></Footer>
 </template>

<style scoped>
    br,body{
    background-color: coral;
    }
</style>


<script  lang="js">
   import NavBar from "@/components/NavBar.vue";
   import Footer from "@/components/Footer.vue";
  export default {
     components: {Footer, NavBar},
     data() {
       return {
         activeComp: false
       }
     },
     methods:{

     },
     mounted() {

     this.$router.push("/")
    }
 }


  
 </script>

布局.vue

<template>
    <h1>Home</h1>
</template>

关于.vue

<template>
    <h1>About</h1>
 </template>

App.vue 中的路径清楚地显示，单击路由器链接时它是正确的。但视图没有改变或正确加载。我过去多次使用过 Vue 路由器。

任何帮助都将不胜感激！提前致谢。