添加页面过渡效果,更新路由元信息以设置页面标题,优化页脚内容和样式

This commit is contained in:
2025-03-05 22:23:00 +08:00
parent e423b5a1d4
commit e90753a878
6 changed files with 70 additions and 14 deletions

7
package-lock.json generated
View File

@ -14,6 +14,7 @@
"github-calendar": "^2.3.4",
"js-yaml": "^4.1.0",
"vue": "^3.5.13",
"vue-page-transition": "^0.2.2",
"vue-router": "^4.5.0",
"yaml": "^2.7.0"
},
@ -1909,6 +1910,12 @@
}
}
},
"node_modules/vue-page-transition": {
"version": "0.2.2",
"resolved": "https://registry.npmjs.org/vue-page-transition/-/vue-page-transition-0.2.2.tgz",
"integrity": "sha512-qOx+llJ28XX0VwJNJ4GVaeNBPRmPMZac2QQgrIHVUhpXyJx2CQ2XvoQOpGD1ge7QMY3PjZ6fwTbdBwZkA3I9qA==",
"license": "MIT"
},
"node_modules/vue-router": {
"version": "4.5.0",
"resolved": "https://registry.npmjs.org/vue-router/-/vue-router-4.5.0.tgz",

View File

@ -15,6 +15,7 @@
"github-calendar": "^2.3.4",
"js-yaml": "^4.1.0",
"vue": "^3.5.13",
"vue-page-transition": "^0.2.2",
"vue-router": "^4.5.0",
"yaml": "^2.7.0"
},

View File

@ -6,8 +6,10 @@ import AppFooter from "./components/AppFooter.vue";
<template>
<div>
<NavBar />
<router-view />
<AppFooter />
<transition name="fade" mode="out-in">
<router-view />
</transition>
<AppFooter v-if="!$route.meta.hideFooter" />
</div>
</template>
@ -27,4 +29,14 @@ html, body {
.main-content {
flex: 1; /* 占据剩余空间 */
}
.fade-enter-active,
.fade-leave-active {
transition: opacity 0.5s ease;
}
.fade-enter-from,
.fade-leave-to {
opacity: 0;
}
</style>

View File

@ -2,6 +2,7 @@
<el-footer>
<div class="footer-content">
<div class="footer-text">
<p><a href="https://icp.gov.moe/?keyword=20251453" target="_blank">萌ICP备20251453号</a></p>
<p>
&copy; 2025 By
<a

View File

@ -1,21 +1,31 @@
import { createRouter, createWebHistory } from 'vue-router'
import { createRouter, createWebHistory } from "vue-router";
const routes = [
{
path: '/',
name: 'home',
component: () => import('@/views/HomeView.vue')
path: "/",
name: "home",
component: () => import("@/views/HomeView.vue"),
meta: { hideFooter: true, title: "主页" },
},
{
path: '/links',
name: 'links',
component: () => import('@/views/LinksView.vue')
}
]
path: "/links",
name: "links",
component: () => import("@/views/LinksView.vue"),
meta: { title: "友链" },
},
];
const router = createRouter({
history: createWebHistory(),
routes
})
routes,
});
export default router
router.beforeEach((to, from, next) => {
const title = to.meta.title; // 获取路由元信息中的标题
if (title) {
document.title = "Kisechan | " + title; // 设置页面标题
}
next();
});
export default router;

View File

@ -45,6 +45,26 @@
<i class="fa-solid fa-envelope"></i>
</a>
</div>
<div class="footer-content">
<p>
<a href="https://icp.gov.moe/?keyword=20251453" target="_blank"
>萌ICP备20251453号</a
>
</p>
<p>
&copy; 2025 By
<a
href="https://github.com/Kisechan"
target="_blank"
rel="nofollow noopener"
><strong>Kisechan</strong></a
>
</p>
<p style="font-size: 0.75em">
Made With <a href="https://cn.vuejs.org/">Vue3</a> &
<a href="https://element-plus.org/zh-CN/">Element Plus</a>
</p>
</div>
</el-col>
</el-row>
</el-main>
@ -120,4 +140,9 @@ onMounted(() => {
flex-direction: column;
gap: 24px; /* 设置 author-info 和 social-icons 之间的间隔 */
}
.footer-content {
max-width: 1200px;
margin: 0 auto;
}
</style>