Vue React项目中优雅实现返上一页的3种方案-嘻道妙招

馃寪鍢匡紝鍚勪綅鍒氬叆闂ㄧ殑鍓嶇灏忎紮浼达紒浣犱滑鏈夋病鏈夐亣鍒拌繃杩欑鎯呭喌锛氬湪Vue/React椤圭洰閲岀偣浜嗚繑鍥炴寜閽紝缁撴灉椤甸潰鐘舵€佸叏涓簡锛熸垨鑰呭畨鍗撳拰iOS璁惧涓婄殑杩斿洖琛屼负涓嶄竴鑷达紵浠婂ぉ鍜变滑灏辨潵鍞犲敔杩欎釜"杩斿洖涓婁竴椤?鐨勯棬閬擄紝鎵嬫妸鎵嬫暀浣犱笁绉嶆棦浼橀泤鍙堝疄鐢ㄧ殑瑙ｅ喅鏂规锛?/p>

鏂规涓€锛氭鏋惰嚜甯﹁矾鐢辨帶鍒舵硶锛堥€傚悎鍩虹鍦烘櫙锛?/h3>

馃敟鈥?strong>鈥嬫牳蹇冩€濊矾鈥?/strong>鈥嬶細鐩存帴璋冪敤Vue Router/React Router瀹樻柟API
灏卞儚寮€鎵嬪姩鎸℃苯杞﹁鐢ㄧ鍚堝櫒锛岀敤妗嗘灦鑷甫鐨勫鑸柟娉曟渶鐪佸績銆傚湪Vue椤圭洰閲岃瘯璇曡繖涓細

javascript澶嶅埗// Vue涓?/span>
this.$router.go(-1) 
// 鎴栬€呮洿璇箟鍖栫殑鍐欐硶
this.$router.back()

React椤圭洰鍙互杩欐牱鐜╋細

javascript澶嶅埗// React涓?/span>
import { useHistory } from 'react-router-dom'
const history = useHistory()
history.goBack()

馃洜锔?鈥?strong>鈥嬪疄鎴樻妧宸р€?/strong>鈥嬶細

鍦ㄧЩ鍔ㄧ寤鸿缁欒繑鍥炴寜閽坊鍔犵偣鍑诲姩鐢伙紙姣斿scale缂╂斁鏁堟灉锛?/li>
瀹夊崜璁惧娉ㄦ剰鐗╃悊杩斿洖閿殑鐩戝惉锛屽彲浠ラ€氳繃window.onpopstate浜嬩欢澶勭悊
鎼厤璺敱瀹堝崼浣跨敤鏇撮锛屾瘮濡傜寮€鍓嶅脊绐楃‘璁わ細

javascript澶嶅埗// Vue璺敱瀹堝崼
beforeRouteLeave (to, from, next) {
  if(琛ㄥ崟鏈繚瀛?{
    confirm('瑕佹斁寮冧慨鏀瑰悧锛?) ? next() : next(false)
  }
}

鏂规浜岋細鐘舵€佸揩鐓ф硶锛堥€傚悎澶嶆潅浜や簰鍦烘櫙锛?/h3>

馃摳鈥?strong>鈥嬫牳蹇冩€濊矾鈥?/strong>鈥嬶細鍍忔媿绔嬪緱鐩告満涓€鏍蜂繚瀛橀〉闈㈢姸鎬?br/> 褰撻亣鍒伴渶瑕佷繚鐣欒〃鍗曟暟鎹€佹粴鍔ㄤ綅缃瓑澶嶆潅鍦烘櫙鏃讹紝璇曡瘯杩欎釜缁勫悎鎷筹細

鈥?strong>鈥媀ue鈥?/strong>鈥嬬敤keep-alive缂撳瓨缁勪欢锛?/li>

html杩愯澶嶅埗<keep-alive>
  <router-view v-if="$route.meta.keepAlive">router-view>
keep-alive>

鈥?strong>鈥婻eact鈥?/strong>鈥嬪彲浠ョ敤useRef淇濆瓨鐘舵€侊細

javascript澶嶅埗const scrollPos = useRef(0)
useEffect(() => {
  return () => {
    scrollPos.current = window.pageYOffset
  }
}, [])

馃挕鈥?strong>鈥嬭繘闃剁帺娉曗€?/strong>鈥嬶細

鐢╯essionStorage涓存椂瀛樺偍鍏抽敭鏁版嵁锛堟湁鏁堟湡鍒板叧闂祻瑙堝櫒锛?/li>
瀵逛簬瓒呴暱琛ㄥ崟锛屽彲浠ュ畾鏈熻嚜鍔ㄤ繚瀛樿崏绋?/li>
缁撳悎History API鐨剆tate鍙傛暟浼犻€掓暟鎹細

javascript澶嶅埗// 璺宠浆鏃朵繚瀛樼姸鎬?/span>
history.pushState({ formData }, '')
// 杩斿洖鏃惰鍙?/span>
window.addEventListener('popstate', (e) => {
  if(e.state?.formData){
    setFormData(e.state.formData)
  }
})

鏂规涓夛細鍔ㄦ€佽矾鐢辨硶锛堥€傚悎澶氱閫傞厤鍦烘櫙锛?/h3>

馃摫鈥?strong>鈥嬫牳蹇冩€濊矾鈥?/strong>鈥嬶細鍍忓彉鑹查緳涓€鏍烽€傞厤涓嶅悓鐜
褰撻」鐩渶瑕佸祵鍏PP鎴栧鐞嗙壒娈婅繑鍥為€昏緫鏃讹紝璇曡瘯杩欎釜涓囪兘鍏紡锛?/p>

javascript澶嶅埗const backHandler = () => {
  if(isInApp){
    // 璋冪敤APP鍘熺敓鏂规硶
    window.NativeSDK.goBack()
  } else if(isIOS){
    // 澶勭悊iOS宸︽粦鎵嬪娍
    addSwipeListener()
  } else {
    // 鏅€氱綉椤佃繑鍥?/span>
    history.back()
  }
}

馃洜锔?鈥?strong>鈥嬮伩鍧戞寚鍗椻€?/strong>鈥嬶細

鈥?strong>鈥婾C娴忚鍣ㄢ€?/strong>鈥嬬壒娈婂鐞嗭細鍦║RL鍚庡姞鏃堕棿鎴崇牬闄ょ紦瀛?/li>

javascript澶嶅埗history.pushState(null, '', `${url}?_t=${Date.now()}`)

鈥?strong>鈥嬪井淇℃祻瑙堝櫒鈥?/strong>鈥嬮€傞厤锛氱洃鍚琖eixinJSBridgeReady浜嬩欢
鈥?strong>鈥嬬墿鐞嗚繑鍥為敭鈥?/strong>鈥嬫嫤鎴細瀹夊崜闇€閰嶅悎H5+ API

javascript澶嶅埗plus.key.addEventListener('backbutton', () => {
  if(闇€瑕佽嚜瀹氫箟琛屼负){
    // 鎵ц鑷畾涔夐€昏緫
  } else {
    history.back()
  }
})

馃専鐙瑙佽В锛氫负浠€涔堜綘鐨勮繑鍥炲姛鑳芥€诲嚭bug锛?/h3>

鏍规嵁2024骞村紑鍙戣€呰皟鐮旀暟鎹樉绀猴紝鈥?strong>鈥?3%鐨勭Щ鍔ㄧ杩斿洖寮傚父鈥?/strong>鈥嬮兘鏄繖涓変釜鍘熷洜锛?/p>

娌″鐞嗗ソ娴忚鍣ㄧ紦瀛橈紙鐗瑰埆鏄痠OS鐨刡fcache鏈哄埗锛?/li>
璺敱瀹堝崼鍜岀敓鍛藉懆鏈熼挬瀛愭墽琛岄『搴忔贩涔?/li>
澶氱鐜鍒ゆ柇閫昏緫涓嶄弗璋?/li>

寤鸿鍦ㄩ」鐩腑娣诲姞杩欎釜涓囪兘妫€娴嬪嚱鏁帮細

javascript澶嶅埗const checkBackCompatibility = () => {
  // 妫€娴嬫槸鍚﹀湪APP鍐?/span>
  const isApp = /APPName/.test(navigator.userAgent)
  // 妫€娴媔OS宸︽粦鎵嬪娍鏀寔
  const isIOS = !!navigator.platform.match(/iPhone|iPod|iPad/)
  // 妫€娴嬪井淇＄幆澧?/span>
  const isWechat = /MicroMessenger/.test(navigator.userAgent)
  
  return { isApp, isIOS, isWechat }
}

鏈€鍚庤鍙ユ帍蹇冪獫鐨勮瘽锛氣€?strong>鈥嬫病鏈夊畬缇庣殑鏂规锛屽彧鏈夋渶閫傚悎鐨勫満鏅€?/strong>鈥嬨€傚皬鍨嬮」鐩敤鏂规涓€瓒冲锛屼腑澶у瀷椤圭洰寤鸿鏂规浜?鏂规涓夌粍鍚堜娇鐢ㄣ€備笅娆″啀纰板埌杩斿洖鍔熻兘鐨勫潙锛岃寰楀厛鍠濆彛姘村帇鍘嬫儕锛岀劧鍚庢寜杩欎笁涓敠鍥婂璁℃帓鏌ワ紝鍖呬綘鑽埌鐥呴櫎锛?/p>

本文由嘻道妙招独家原创，未经允许，严禁转载

Vue React项目中优雅实现返上一页的3种方案

相关推荐