取消行业案例里每次都刷新的问题。
This commit is contained in:
parent
5917e1858f
commit
680317c0d2
@ -2,21 +2,36 @@
|
|||||||
<!--<div class="pageroot" style="background-color: white;">-->
|
<!--<div class="pageroot" style="background-color: white;">-->
|
||||||
<div v-if="this.error==null" id="examplelist">
|
<div v-if="this.error==null" id="examplelist">
|
||||||
<div id="typegrid">
|
<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"
|
<div class="typebar"
|
||||||
:class="{
|
:class="{
|
||||||
active: (!$route.query.type || $route.query.type === '')}">
|
active: (!$route.query.type || $route.query.type === '')}">
|
||||||
全部
|
全部
|
||||||
</div>
|
</div>
|
||||||
</a>
|
</router-link>
|
||||||
<a v-for="(item, index) in this.types"
|
<router-link v-for="(item, index) in this.types"
|
||||||
:key="index":href="`/Examples?type=${item}`"
|
:key="index":to="{ name: 'Examples', query: {type:item} }"
|
||||||
style="text-decoration: none;">
|
style="text-decoration: none;">
|
||||||
<div class="typebar"
|
<div class="typebar"
|
||||||
:class="{ active: ($route.query.type === item)}">
|
:class="{ active: ($route.query.type === item)}">
|
||||||
{{item}}
|
{{item}}
|
||||||
</div>
|
</div>
|
||||||
</a>
|
</router-link>
|
||||||
</div>
|
</div>
|
||||||
<!--列表-->
|
<!--列表-->
|
||||||
<div id="listmain">
|
<div id="listmain">
|
||||||
@ -124,6 +139,16 @@ export default {
|
|||||||
mounted() {
|
mounted() {
|
||||||
this.fetch_types();
|
this.fetch_types();
|
||||||
this.fetch_items();
|
this.fetch_items();
|
||||||
|
},
|
||||||
|
watch: {
|
||||||
|
// 监听路由的 query 对象
|
||||||
|
'$route.query.type': function(newType, oldType) {
|
||||||
|
// 当 type 参数变化时,重新获取列表项
|
||||||
|
// 确保在组件仍然是 Examples 页面时才执行
|
||||||
|
if (this.$route.name === 'Examples') {
|
||||||
|
this.fetch_items();
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
@ -63,7 +63,20 @@ const routes= [
|
|||||||
|
|
||||||
const router = createRouter({
|
const router = createRouter({
|
||||||
history: createWebHistory(),
|
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' };
|
||||||
|
}
|
||||||
|
}
|
||||||
})
|
})
|
||||||
|
|
||||||
// 路由守卫,切换页面时修改标题
|
// 路由守卫,切换页面时修改标题
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user