vue——詳細頁返回列表頁，不重新整理，保留列表頁原來停留位置
阿新 • • 發佈：2019-01-24
經常有這樣的功能，從列表頁上選擇一項，跳到詳細頁，詳細頁看完，返回列表頁。這時，列表頁的元件會重新建立，也就是要重新從介面請求一次資料，並且會回到第一行，對於資料更新要求不高的業務來說，這樣會浪費資源，而且體驗頁不好（列表一共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']">具體看官方文件