最近项目遇到一个需求,要求实现从列表进入详情,详情页面点击后退,页面停留在进入详情时的列表也main,即实现后退不刷新的功能,但详情也可以改变列表数据,提交详情数据需要重新获取列表数据
首先这是一个移动端项目,使用的了两个tab来展示两个列表,一个是待评分,一个是已评分,待评分数据评分后就会变成已评分数据,所以就要实现详情页面返回,列表页面不变不刷新,提交评分数据,页面就要重新加载数据
上网搜了很多教程,大多数使用的是keep-alive来进行页面缓存,所以我也是采用的keep-alive的方法。
1、对需要缓存的页面添加meta参数
在路由的route文件夹下,这里我的routes路由配置是单独抽出来的一个文件,不抽出来的就是在router/index.js文件里面
const routes = [
{
path: '/XXX',
name: '组件名',
meta: {
keepAlive: true
},
component: 页面组件名称,
}
]
2、在router/index.js文件中添加
const router = new Router({
mode: 'history',
routes,
scrollBehavior (to, from, savedPosition) {
if (savedPosition) {
return savedPosition
}
if (from.meta.keepAlive) {
from.meta.savedPosition = document.body.scrollTop // 此处为记录的滚动条位置
}
from.meta.savedPosition = document.body.scrollTop
return { x: 0, y: to.meta.savedPosition || 0 }
}
})
3、点击返回的方法,使用back
back会使页面不刷新
this.$router.back(-1)
4、在app.js中使用keep-alive
这里使用 :key=“$route.fullPath”, 会使组件强制不复用,因为如果没有这个属性,组件就会有一个复用性,而添加这个属性就是为了在页面提交修改数据时,能够对列表数据进行重新渲染
<div id="app">
<keep-alive >
<router-view v-if="$route.meta.keepAlive" :key="$route.fullPath"></router-view>
</keep-alive>
<router-view v-if="!$route.meta.keepAlive"></router-view>
</div>
5、需要重新渲染数据时
在详情页面提交数据时,就需要重新获取数据
这里给列表页面组件路径添加一个随机query数据,因为前面的路由的 :key=“$route.fullPath” ,点击提交数据后,通过这个push返回就能够重新加载页面了,其他时候页面会保持一个缓存状态,不会刷新。
this.$router.push({
path: '/列表路径',
query: { 'randomID': 'id' + Math.random() },
})