这一次练习不使用后端，只进行对使用vue3的前端练习，包括两种不同的跳转方式：
我的部分代码大致如下：
DashboardView.vue：
<template><div><h1>仪表盘视图</h1><p>这是您的个人仪表盘，显示各种统计信息。</p><div class="stats-container"><div class="stat-card"><h3>访问量</h3><p class="stat-value">1,254</p></div><div class="stat-card"><h3>用户数</h3><p class="stat-value">548</p></div><div class="stat-card"><h3>完成率</h3><p class="stat-value">89%</p></div></div><button class="btn back-btn" @click="goHome">返回首页</button></div>
</template><script>
export default {methods: {goHome() {this.$router.push({ name: 'home' });}}
}
</script><style scoped>
.stats-container {display: flex;justify-content: center;gap: 20px;margin: 40px 0;
}.stat-card {background: linear-gradient(135deg, #f0f7ff, #e6f2ff);border-radius: 12px;padding: 20px;text-align: center;min-width: 150px;box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}.stat-value {font-size: 2.2rem;font-weight: 700;color: #2c3e50;margin: 10px 0;
}.back-btn {margin-top: 30px;
}
</style>
HomeView.vue``
<template><div><div class="nav-container"><router-link :to="{ name: 'home' }" class="nav-link" active-class="active">首页</router-link><router-link to="/dashboard" class="nav-link" active-class="active">仪表盘</router-link><router-link to="/profile" class="nav-link" active-class="active">个人中心</router-link></div><h1>欢迎来到首页</h1><p>这是一个使用Vue构建的多页面应用示例。点击下方按钮切换到不同视图。</p><div class="button-container"><button class="btn" @click="switchView('dashboard')">查看仪表盘</button><button class="btn" @click="switchView('profile')">查看个人中心</button><button class="btn about-btn" @click="goToAbout">前往关于页</button></div></div>
</template><script>
export default {name: 'HomeView',methods: {switchView(viewName) {this.$router.push({ name: viewName })},goToAbout() {this.addLoadingToButton('.about-btn');setTimeout(() => {window.location.href = 'about.html';}, 500);},addLoadingToButton(selector) {const btn = document.querySelector(selector);if (btn) btn.classList.add('loading');}}
}
</script>
ProfileView.vue
<template><div><h1>个人中心</h1><p>这是您的个人信息页面。</p><div class="profile-card"><div class="avatar"><div class="avatar-initial">U</div></div><div class="profile-info"><h3>用户名</h3><p>user@example.com</p><p>会员状态: <span class="premium">高级会员</span></p></div></div><button class="btn back-btn" @click="goHome">返回首页</button></div>
</template><script>
export default {methods: {goHome() {this.$router.push({ name: 'home' });}}
}
</script><style scoped>
.profile-card {display: flex;align-items: center;gap: 25px;background: white;border-radius: 15px;padding: 25px;margin: 30px auto;max-width: 500px;box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
}.avatar {width: 80px;height: 80px;border-radius: 50%;background: linear-gradient(135deg, #6a11cb, #2575fc);display: flex;align-items: center;justify-content: center;
}.avatar-initial {font-size: 2.5rem;font-weight: bold;color: white;
}.profile-info h3 {font-size: 1.8rem;margin-bottom: 10px;
}.premium {color: #ff7e5f;font-weight: 700;
}.back-btn {margin-top: 30px;
}
</style>
router.js：
import { createRouter, createWebHashHistory } from 'vue-router'
// 导入视图组件
const HomeView = () => import('./views/HomeView.vue')
const DashboardView = () => import('./views/DashboardView.vue')
const ProfileView = () => import('./views/ProfileView.vue')const routes = [{path: '/',name: 'home',component: HomeView,meta: { title: '首页' }},{path: '/dashboard',name: 'dashboard',component: DashboardView,meta: { title: '仪表盘' }},{path: '/profile',name: 'profile',component: ProfileView,meta: { title: '个人中心' }}
]const router = createRouter({history: createWebHashHistory(),routes
})router.beforeEach((to) => {document.title = to.meta.title || '默认标题';
});export default router
这一个部分就能实现单页面跳转，如下图：
