vue——详细页返回列表页，不刷新，保留列表页原来停留位置
经常有这样的功能，从列表页上选择一项，跳到详细页，详细页看完，返回列表页。这时，列表页的组件会重新创建，也就是要重新从接口请求一次数据，并且会回到第一行，对于数据更新要求不高的业务来说，这样会浪费资源，而且体验页不好（列表一共100条，滑动到了90条了，点进去看好明细，出来，看到的是第1条，想看91条，还得滑下去）。那么怎么能返回到列表页后不刷新呢①路由文件：export default...
·
经常有这样的功能，从列表页上选择一项，跳到详细页，详细页看完，返回列表页。这时，列表页的组件会重新创建，也就是要重新从接口请求一次数据，并且会回到第一行，对于数据更新要求不高的业务来说，这样会浪费资源，而且体验页不好（列表一共100条，滑动到了90条了，点进去看好明细，出来，看到的是第1条，想看91条，还得滑下去）。那么怎么能返回到列表页后不刷新呢
①路由文件：
export default new Router({
routes: [
{
path: '/hello',
name: 'HelloWorld',
component: HelloWorld,
meta: {
keepAlive: true // 需要缓存
}
},
{
path: '/hello2',
name: 'HelloWorld2',
component: HelloWorld2,
meta: {
keepAlive: false // 不需要缓存
}
}
],
mode: 'history',
scrollBehavior (to, from, savedPosition) {
if (savedPosition) {
return savedPosition
} else {
return { x: 0, y: 0 }
}
}
})②app.vue中的router-view，外面套一层keep-alive
<keep-alive>
<router-view v-if="$route.meta.keepAlive"></router-view>
</keep-alive>
<router-view v-if="!$route.meta.keepAlive"></router-view>从详细页回到列表页，要用
this.$router.back()
用push()是不能保留滚动条停留位置的。
另外，滚动条停留位置，保留的似乎是<body>滚动条的位置。如果路由是在body内部一个div中滚动，body没有滚动条，不会保留这个div的滚动停留位置
vue版本在2.1.0之后，新增了include 和 exclude
以上代码可改成：
export default new Router({
routes: [
{
path: '/hello',
name: 'HelloWorld',
component: HelloWorld
},
{
path: '/hello2',
name: 'HelloWorld2',
component: HelloWorld2
}
],
mode: 'history',
scrollBehavior (to, from, savedPosition) {
if (savedPosition) {
return savedPosition
} else {
return { x: 0, y: 0 }
}
}
})
<keep-alive :include="['HelloWorld']">
<router-view></router-view>
</keep-alive>include，exclude的用法
<keep-alive include="a,b"><keep-alive :include="/a|b/"><keep-alive :include="['a', 'b']">具体看官方文档
前往低代码交流专区
更多推荐
3
0- 0
已为社区贡献1条内容
所有评论(0)