上次我的练习是使用vue3进行的前端训练，我上一个博客简单实现了使用路由的单页面跳转，他的好处的所有页面一起加载，并且只使用一个main和app.vue，我又在原有的基础上尝试了多页面跳转。
about.html
<!DOCTYPE html>
<html lang="en"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1.0"><title>关于我们 - Vue多页面应用</title><link rel="stylesheet" href="<%= BASE_URL %>css/common.css"></head><body><noscript><strong>请启用JavaScript以正常使用此应用</strong></noscript><div id="about-app"></div></body>
</html>
App.vue
<template><div class="container about-page"><div class="content"><h1>关于我们</h1><p>这是一个独立的关于页面，展示了多页面应用的能力。您可以通过下方按钮返回首页。</p><div class="button-container"><button class="btn"@click="goToHome">返回首页</button><button class="btn" @click="learnMore">了解更多</button></div></div></div>
</template><script>
export default {name: 'AboutPage',mounted() {this.animateContainer();},methods: {goToHome() {this.addLoadingToButton('.btn:first-child');setTimeout(() => {window.location.href = 'index.html#/';}, 500);},learnMore() {alert('这是关于页的一个功能按钮');},addLoadingToButton(selector) {const btn = document.querySelector(selector);if (btn) btn.classList.add('loading');},animateContainer() {const container = document.querySelector('.container');if (!container) return;container.style.opacity = '0';container.style.transform = 'translateY(20px)';setTimeout(() => {container.style.transition = 'opacity 0.5s, transform 0.5s';container.style.opacity = '1';container.style.transform = 'translateY(0)';}, 100);}}
}
</script>
main.js
import { createApp } from 'vue'
import App from './App.vue'createApp(App).mount('#about-app')
home.html
<!DOCTYPE html>
<html lang="en"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1.0"><title>首页 - Vue多页面应用</title><link rel="stylesheet" href="<%= BASE_URL %>css/common.css"></head><body><noscript><strong>请启用JavaScript以正常使用此应用</strong></noscript><div id="app"></div></body>
</html>
App.vue
<template><!-- 添加根容器确保正确挂载 --><div id="app"><div class="container"><div class="content"><!-- 添加错误边界处理 --><router-view v-slot="{ Component, route }"><transition name="fade" mode="out-in"><div v-if="route.matched.length"><component :is="Component" /></div><div v-else class="error-view"><h2>页面未找到</h2><p>请求的路径 "{{ route.path }}" 不存在</p><button @click="goHome">返回首页</button></div></transition></router-view></div></div></div>
</template><script>
export default {name: 'App',methods: {goHome() {// 确保使用正确的首页路径this.$router.push({ name: 'home' });}}
}
</script>
main.js
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'createApp(App).use(router).mount('#app')
css文件不赘述，效果如下：
点击返回首页就是我上个练习的界面，点击了解更多则是我的一个另小功能测试，也不用赘述。