日常练习另一部分

上次我的练习是使用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文件不赘述，效果如下：
image
点击返回首页就是我上个练习的界面，点击了解更多则是我的一个另小功能测试，也不用赘述。

posted @ 2025-09-22 14:47  老汤姆233  阅读(3)  评论(0)    收藏  举报