日常练习一部分

这一次练习不使用后端，只进行对使用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

这一个部分就能实现单页面跳转，如下图：