取消行业案例里每次都刷新的问题。

This commit is contained in:
zhcnyuyang 2025-05-26 00:40:53 +08:00
parent 5917e1858f
commit 680317c0d2
2 changed files with 45 additions and 7 deletions

View File

@ -2,21 +2,36 @@
<!--<div class="pageroot" style="background-color: white;">-->
<div v-if="this.error==null" id="examplelist">
<div id="typegrid">
<a href="/Examples" style="text-decoration: none;">
<!-- <a href="/Examples" style="text-decoration: none;">-->
<!-- <div class="typebar"-->
<!-- :class="{-->
<!-- active: (!$route.query.type || $route.query.type === '')}">-->
<!-- 全部-->
<!-- </div>-->
<!-- </a>-->
<!-- <a v-for="(item, index) in this.types"-->
<!-- :key="index":href="`/Examples?type=${item}`"-->
<!-- style="text-decoration: none;">-->
<!-- <div class="typebar"-->
<!-- :class="{ active: ($route.query.type === item)}">-->
<!-- {{item}}-->
<!-- </div>-->
<!-- </a>-->
<router-link to="/Examples" style="text-decoration: none;">
<div class="typebar"
:class="{
active: (!$route.query.type || $route.query.type === '')}">
全部
</div>
</a>
<a v-for="(item, index) in this.types"
:key="index":href="`/Examples?type=${item}`"
style="text-decoration: none;">
</router-link>
<router-link v-for="(item, index) in this.types"
:key="index":to="{ name: 'Examples', query: {type:item} }"
style="text-decoration: none;">
<div class="typebar"
:class="{ active: ($route.query.type === item)}">
{{item}}
</div>
</a>
</router-link>
</div>
<!--列表-->
<div id="listmain">
@ -124,6 +139,16 @@ export default {
mounted() {
this.fetch_types();
this.fetch_items();
},
watch: {
// query
'$route.query.type': function(newType, oldType) {
// type
// Examples
if (this.$route.name === 'Examples') {
this.fetch_items();
}
}
}
}
</script>

View File

@ -63,7 +63,20 @@ const routes= [
const router = createRouter({
history: createWebHistory(),
routes
routes,
scrollBehavior(to, from, savedPosition) {
// 如果有保存的滚动位置 (例如,当用户点击浏览器的后退/前进按钮时),则恢复该位置
if (savedPosition) {
return savedPosition;
} else {
// 如果目标路由和来源路由都是 Examples则不改变滚动位置
if (to.name === 'Examples' && from.name === 'Examples') {
return false; // 保持当前滚动位置
}
// 否则,滚动到页面顶部
return { top: 0, left: 0, behavior: 'instant' };
}
}
})
// 路由守卫,切换页面时修改标题