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 路由器。
任何帮助都将不胜感激!提前致谢。