使用最新版本的 Vue，Vue 路由器无法正常工作

Question

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>

点击router链接后，App.vue中的路径清晰可见，是正确的。但视图无法更改或正确加载。我过去多次使用过 Vue 路由器。

任何帮助将不胜感激！ 预先感谢。

Answer 1

您应该使用

router-view

组件来渲染当前视图：

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

   <p>Current route path: {{ $route.path }}</p>
   <router-view/>
   <Footer></Footer>
 </template>