vue——详细页返回列表页，不刷新，保留列表页原来停留位置

经常有这样的功能，从列表页上选择一项，跳到详细页，详细页看完，返回列表页。这时，列表页的组件会重新创建，也就是要重新从接口请求一次数据，并且会回到第一行，对于数据更新要求不高的业务来说，这样会浪费资源，而且体验页不好（列表一共100条，滑动到了90条了，点进去看好明细，出来，看到的是第1条，想看91条，还得滑下去）。那么怎么能返回到列表页后不刷新呢①路由文件：export default...

Geoff俊

20461人浏览 · 2018-08-16 10:37:41

Geoff俊 · 2018-08-16 10:37:41 发布

①路由文件：

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']">

具体看官方文档

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^