mirror of
https://github.com/Kisechan/Mainpage.git
synced 2025-07-09 14:47:18 +00:00
添加页面过渡效果,更新路由元信息以设置页面标题,优化页脚内容和样式
This commit is contained in:
7
package-lock.json
generated
7
package-lock.json
generated
@ -14,6 +14,7 @@
|
|||||||
"github-calendar": "^2.3.4",
|
"github-calendar": "^2.3.4",
|
||||||
"js-yaml": "^4.1.0",
|
"js-yaml": "^4.1.0",
|
||||||
"vue": "^3.5.13",
|
"vue": "^3.5.13",
|
||||||
|
"vue-page-transition": "^0.2.2",
|
||||||
"vue-router": "^4.5.0",
|
"vue-router": "^4.5.0",
|
||||||
"yaml": "^2.7.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": {
|
"node_modules/vue-router": {
|
||||||
"version": "4.5.0",
|
"version": "4.5.0",
|
||||||
"resolved": "https://registry.npmjs.org/vue-router/-/vue-router-4.5.0.tgz",
|
"resolved": "https://registry.npmjs.org/vue-router/-/vue-router-4.5.0.tgz",
|
||||||
|
@ -15,6 +15,7 @@
|
|||||||
"github-calendar": "^2.3.4",
|
"github-calendar": "^2.3.4",
|
||||||
"js-yaml": "^4.1.0",
|
"js-yaml": "^4.1.0",
|
||||||
"vue": "^3.5.13",
|
"vue": "^3.5.13",
|
||||||
|
"vue-page-transition": "^0.2.2",
|
||||||
"vue-router": "^4.5.0",
|
"vue-router": "^4.5.0",
|
||||||
"yaml": "^2.7.0"
|
"yaml": "^2.7.0"
|
||||||
},
|
},
|
||||||
|
16
src/App.vue
16
src/App.vue
@ -6,8 +6,10 @@ import AppFooter from "./components/AppFooter.vue";
|
|||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
<NavBar />
|
<NavBar />
|
||||||
<router-view />
|
<transition name="fade" mode="out-in">
|
||||||
<AppFooter />
|
<router-view />
|
||||||
|
</transition>
|
||||||
|
<AppFooter v-if="!$route.meta.hideFooter" />
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
@ -27,4 +29,14 @@ html, body {
|
|||||||
.main-content {
|
.main-content {
|
||||||
flex: 1; /* 占据剩余空间 */
|
flex: 1; /* 占据剩余空间 */
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.fade-enter-active,
|
||||||
|
.fade-leave-active {
|
||||||
|
transition: opacity 0.5s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.fade-enter-from,
|
||||||
|
.fade-leave-to {
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
@ -2,6 +2,7 @@
|
|||||||
<el-footer>
|
<el-footer>
|
||||||
<div class="footer-content">
|
<div class="footer-content">
|
||||||
<div class="footer-text">
|
<div class="footer-text">
|
||||||
|
<p><a href="https://icp.gov.moe/?keyword=20251453" target="_blank">萌ICP备20251453号</a></p>
|
||||||
<p>
|
<p>
|
||||||
© 2025 By
|
© 2025 By
|
||||||
<a
|
<a
|
||||||
|
@ -1,21 +1,31 @@
|
|||||||
import { createRouter, createWebHistory } from 'vue-router'
|
import { createRouter, createWebHistory } from "vue-router";
|
||||||
|
|
||||||
const routes = [
|
const routes = [
|
||||||
{
|
{
|
||||||
path: '/',
|
path: "/",
|
||||||
name: 'home',
|
name: "home",
|
||||||
component: () => import('@/views/HomeView.vue')
|
component: () => import("@/views/HomeView.vue"),
|
||||||
|
meta: { hideFooter: true, title: "主页" },
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
path: '/links',
|
path: "/links",
|
||||||
name: 'links',
|
name: "links",
|
||||||
component: () => import('@/views/LinksView.vue')
|
component: () => import("@/views/LinksView.vue"),
|
||||||
}
|
meta: { title: "友链" },
|
||||||
]
|
},
|
||||||
|
];
|
||||||
|
|
||||||
const router = createRouter({
|
const router = createRouter({
|
||||||
history: createWebHistory(),
|
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;
|
||||||
|
@ -45,6 +45,26 @@
|
|||||||
<i class="fa-solid fa-envelope"></i>
|
<i class="fa-solid fa-envelope"></i>
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="footer-content">
|
||||||
|
<p>
|
||||||
|
<a href="https://icp.gov.moe/?keyword=20251453" target="_blank"
|
||||||
|
>萌ICP备20251453号</a
|
||||||
|
>
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
© 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-col>
|
||||||
</el-row>
|
</el-row>
|
||||||
</el-main>
|
</el-main>
|
||||||
@ -120,4 +140,9 @@ onMounted(() => {
|
|||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
gap: 24px; /* 设置 author-info 和 social-icons 之间的间隔 */
|
gap: 24px; /* 设置 author-info 和 social-icons 之间的间隔 */
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.footer-content {
|
||||||
|
max-width: 1200px;
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
Reference in New Issue
Block a user