vue返回上一頁面時回到原先滾動的位置的方法
更新時間：2018年12月20日 08:36:49 作者：honey緣木魚
這篇文章主要介紹了vue返回上一頁面時回到原先滾動的位置的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
項(xiàng)目結(jié)束，測試時發(fā)現(xiàn)在首頁商品列表中，向上滑動幾頁后點(diǎn)擊進(jìn)入詳情，從詳情頁面返回商品列表時，頁面回到了最頂部，測試不通過說是用戶體驗(yàn)不好，要求從哪里點(diǎn)擊進(jìn)去返回該頁面時回到原先的滾動頁面。
思路：因?yàn)関ue是單頁面應(yīng)用，進(jìn)入其他頁面時會銷毀該頁面，用keep-alive不讓其刷新，具體實(shí)現(xiàn)為：
(1).在App.vue中加入：
<template> <div id="app"> <!--<router-view/>--> <!--頁面返回不刷新--> <keep-alive> <router-view v-if="$route.meta.keepAlive"></router-view> </keep-alive> <router-view v-if="!$route.meta.keepAlive"></router-view> </div> </template>
(2).index.js頁面
export default new Router({
routes: [{
path: '/',
name: 'index',
component: index,
meta: {
keepAlive: true
}
},
這樣在index.vue中，mounted方發(fā)只走一次，在瀏覽器上實(shí)現(xiàn)了返回原來滾動位置的目的。但是在手機(jī)上測試，發(fā)現(xiàn)沒用，解決手機(jī)上實(shí)現(xiàn)目的的方法：
//在頁面離開時記錄滾動位置
beforeRouteLeave (to, from, next) {
this.scrollTop = document.documentElement.scrollTop || document.body.scrollTop
next()
},
//進(jìn)入該頁面時，用之前保存的滾動位置賦值
beforeRouteEnter (to, from, next) {
next(vm => {
document.body.scrollTop = vm.scrollTop
})
},
OK！實(shí)現(xiàn)！！
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
vue中的el-form表單rule校驗(yàn)問題(特殊字符、中文、數(shù)字等)
這篇文章主要介紹了vue中的el-form表單rule校驗(yàn)問題(特殊字符、中文、數(shù)字等)，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-05-05
本文給大家總結(jié)了Vue中操作dom元素的多種方法，每種方法結(jié)合實(shí)例代碼給大家講解的非常詳細(xì)，需要的朋友參考下吧2022-12-12
下面小編就為大家分享一篇Vue父組件調(diào)用子組件事件方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-02-02
這篇文章主要介紹了vue.js 父向子組件傳參的實(shí)例代碼,需要的朋友可以參考下2017-10-10
淺談VueJS SSR 后端繪制內(nèi)存泄漏的相關(guān)解決經(jīng)驗(yàn)
這次我想給大家介紹的內(nèi)存泄漏的定位方法，并非工具的使用。而是一些經(jīng)驗(yàn)的總結(jié)，也就是我所知道的 VueJS SSR 中最容易出現(xiàn)內(nèi)存泄漏的地方，非常具有實(shí)用價值，需要的朋友可以參考下2018-12-12
vue實(shí)現(xiàn)驗(yàn)證碼倒計(jì)時按鈕
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)驗(yàn)證碼倒計(jì)時按鈕，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-08-08
vue axios請求成功卻進(jìn)入catch的原因分析
這篇文章主要介紹了vue axios請求成功卻進(jìn)入catch的原因分析，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-09-09
vue之el-upload使用FormData多文件同時上傳問題
這篇文章主要介紹了vue之el-upload使用FormData多文件同時上傳問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-05-05
vue 3 中watch 和watchEffect 的新用法
本篇文章主要通過 Options API 和 Composition API 對比 watch 的使用方法，讓大家快速掌握 vue3 中 watch 新用法,需要的朋友可以參考一下哦，希望對大家有所幫助2021-11-11
組件（Component）是 Vue.js 最強(qiáng)大的功能之一。組件可以擴(kuò)展 HTML 元素，封裝可重用的代碼。這篇文章主要介紹了vue.js 中的組件，需要的朋友參考下2018-02-02