以下为不同前端框架实现
列表页进入详情页返回不刷新（保持当前分页），从其他页面
进入列表页刷新的方法：
###
Vue.js 实现方案
在
Vue.js 里，可借助 `keep-alive` 组件和路由守卫达成此功能。`keep-alive` 能够缓存组件实例，防止组件在切换时被销毁和重新创建，路由守卫则用于控制页面的刷新逻辑。
```
vue
<template>
<div id="
app">
<!-- 使用 keep-alive 缓存组件 -->
<keep-alive>
<router-view v-if="$route
.meta
.keepAlive"></router-view>
</keep-alive>
<router-view v-if="!$route
.meta
.keepAlive"></router-view>
</div>
</template>
<script>
export default {
name: '
App',
watch: {
// 监听路由变化
$route(to, from) {
if (to
.name === 'ListPage' && from
.name === 'DetailPage') {
// 从
详情页返回
列表页，不刷新
to
.meta
.keepAlive = true;
} else if (to
.name === 'ListPage') {
// 从其他页面
进入列表页，刷新
to
.meta
.keepAlive = false;
}
}
}
};
</script>
```
### React 实现方案
在 React 中，可以使用 `React Router` 配合 `useRef` 和 `useEffect` 来实现。`useRef` 可以保存分页状态，`useEffect` 用于处理页面加载和路由变化的逻辑。
```
jsx
import React, { useRef, useEffect } from 'react';
import { useLocation, useNavigate } from 'react-router-dom';
const ListPage = () => {
const currentPageRef = useRef(1);
const location = useLocation();
const navigate = useNavigate();
useEffect(() => {
if (location
.state && location
.state
.fromDetail) {
// 从
详情页返回，恢复分页状态
// 这里可以根据实际情况恢复分页状态
} else {
// 从其他页面
进入，重置分页状态
currentPageRef
.current = 1;
}
}, [location]);
const goToDetail = () => {
navigate('/detail', {
state: {
fromList: true,
currentPage: currentPageRef
.current
}
});
};
return (
<div>
<h1>List Page</h1>
{/*
列表内容 */}
<button onClick={goToDetail}>Go to Detail</button>
</div>
);
};
export default ListPage;
```
### Angular 实现方案
在 Angular 中，可以使用路由守卫和服务来实现。路由守卫可以控制路由的访问，服务可以保存分页状态。
```typescript
import { Component, OnInit } from '@angular/core';
import { ActivatedRoute, Router, NavigationEnd } from '@angular/router';
import { filter } from 'rx
js/operators';
@Component({
selector: '
app-list-page',
templateUrl: '
./list-page
.component
.html',
styleUrls: ['
./list-page
.component
.css']
})
export class ListPageComponent implements OnInit {
currentPage = 1;
constructor(private route: ActivatedRoute, private router: Router) {
this
.router
.events
.pipe(
filter(event => event instanceof NavigationEnd)
)
.subscribe((event: NavigationEnd) => {
if (event
.urlAfterRedirects
.includes('/detail') && event
.urlAfterRedirects
.includes('/list')) {
// 从
详情页返回
列表页，不刷新
} else {
// 从其他页面
进入列表页，刷新
this
.currentPage = 1;
}
});
}
ngOnInit(): void {
// 初始化逻辑
}
goToDetail() {
this
.router
.navigate(['/detail'], {
state: {
fromList: true,
currentPage: this
.currentPage
}
});
}
}
```
扫一扫
1361
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
