首頁 > web前端 > js教程 > vue-router回應路由參數的變化的解決方法

vue-router回應路由參數的變化的解決方法

不言
發布: 2019-01-08 11:02:36
轉載
3670 人瀏覽過

這篇文章帶給大家的內容是關於vue-router回應路由參數的變化的解決方法,有一定的參考價值,有需要的朋友可以參考一下,希望對你有幫助。

1、提醒一下,當使用路由參數時,例如從 /user/foo 導覽到 /user/bar,原來的元件實例會被重複使用。因為兩個路由都渲染同個元件,比起銷毀再創建,複用則顯得更有效率。不過,這也意味著元件的生命週期鉤子不會再被呼叫。
僅僅只是路由的參數發生了變化,該路由是預設不做刷新操作的。
為了解決這個問題
不想重複使用的話,就在父元件的router-view上加個key
< ;/router-view>

2、就是vue-router IOS白屏的問題,這個真是太坑了
問題描述:

#進入A頁面-> ;B頁面——>ios自帶的返回——>白屏出現——>手動點擊白屏處——>問題解決

原因分析: 

在ios機器上使用webview開發Vue專案時候,go history(-1), 無法將body的高度拉掉,使得遮住,觸發輕點擊,方可消除遮罩

解決方案實作原理:

html,body都是100%,#app撐起了父元素的告訴,但是瀏覽器預設的滾動scroll並不是#app,而是body,某些因素,造成返回history 後,無法復原(ios 的鍋),為此,我們將#app 進行了絕對定位,並讓它重新成為scroll 的對象,從而解決問題

html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  position: relative;
}
#app {
  width: 100%;
  height: 100%;
  background: #fff;
  overflow: scroll;
  -webkit-overflow-scrolling: touch;
  position: absolute;
  left:0;
  top:0;
}

#app 是父节点,最外层的container。根据具体情况而定
登入後複製

以上是vue-router回應路由參數的變化的解決方法的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:segmentfault.com
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板