欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Vue利用History記錄上一頁面的數(shù)據(jù)方法實例

 更新時間:2018年11月02日 15:38:26   作者:風(fēng)清袖一  
這篇文章主要給大家介紹了關(guān)于Vue利用History記錄上一頁面的數(shù)據(jù)的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

前言

本文主要介紹的是Vue利用History記錄上一頁面數(shù)據(jù)的相關(guān)內(nèi)容,vue使用history后,能夠使得url更加漂亮,也就是不再有‘#'的問題,下面話不多說了,來一起看看詳細(xì)的介紹吧

UI

需求

從列表頁的第二頁進(jìn)入詳情頁,返回時列表頁仍然顯示在第二頁;

從列表頁的第二頁進(jìn)入詳情頁,返回時列表頁的篩選條件仍然存在。

<!--more-->

技術(shù)選擇

  • 使用vue-router組件,通過this.$router.push({path: path, query: query});方式,將頁碼和選擇條件作為參數(shù)存儲在url中,這種方式在上面的UI設(shè)計中是可行的,但是當(dāng)列表頁中包含tab組件時(分頁組件是公用的),會因為push的因素(因為push會打開新頁面)導(dǎo)致一些問題(PS:也可能是本人技術(shù)能力的原因),未實現(xiàn)。
  • 使用History API(HTML5開始支持),通過history.replaceState方式,將頁碼作為參數(shù)存儲在url中,將選擇條件存儲在history中(尚不清楚數(shù)據(jù)具體是存儲在哪里);通過location.hash方式獲取頁碼;通過history.state方式獲取存儲的選擇條件。

具體實現(xiàn)--技術(shù)選擇2

開關(guān)

為分頁組件添加一個開關(guān)(openroute),因為需要灰度上線,萬一有問題,要調(diào)整的頁面也只有一個。代碼如下:

<script>
 export default {
 props: {
 openroute: {
 type: Boolean,
 default: () => (true)
 }
 },
 }
</script>

分頁組件中存儲頁碼和選擇條件&獲取頁碼

<script>
 export default {
 methods: {
 fetchData(page) {
 //請求參數(shù)
 let params = this.params;
 //請求頁碼
 let newPage;
 //openroute處理
 if (this.openroute) {
 //為url添上#page
 if (page) {
 history.replaceState(params.data, document.title, "#" + page);
 } else {
 if (history.state) {
 if (!history.state.key && location.hash && location.hash.split("#") && location.hash.split("#")[1]) {
 if (JSON.stringify(history.state) !== JSON.stringify(params.data)) { //選擇條件變更則請求第一頁
  history.replaceState(params.data, document.title, "#1");
 } else {
  history.replaceState(params.data, document.title, "#" + location.hash.split("#")[1]);
 }
 } else {
 history.replaceState(params.data, document.title, "#1");
 }
 } else {
 if (location.hash && location.hash.split("#") && location.hash.split("#")[1]) {
 history.replaceState(params.data, document.title, "#" + location.hash.split("#")[1]);
 } else {
 history.replaceState(params.data, document.title, "#1");
 }
 }
 }
 //獲取url后面的#page
 if (location.hash && location.hash.split("#") && location.hash.split("#")[1]) {
 newPage = Number(location.hash.split("#")[1]);
 } else {
 newPage = 1;
 }
 } else {
 newPage = page;
 }
 //請求數(shù)據(jù),獲得結(jié)果,傳遞給列表頁面
 }
 }
 }
</script>

列表頁面獲取選擇條件

目前可能是因為框架設(shè)計的問題,沒法在請求數(shù)據(jù)之前通過Object.assign方式為替換初始變量,所以先這樣處理(笨方法,各位大佬有解決辦法麻煩指導(dǎo)下,謝謝):

<script>
 export default {
 data() {
 return {
 form: {
 aaa: (history.state && history.state.aaa) ? history.state.aaa : null,
 bbb: (history.state && history.state.bbb) ? history.state.bbb : null,
 ccc: (history.state && history.state.ccc) ? history.state.ccc : null
 },
 };
 }
 };
</script>

已解決,初始變量不需要動,可以通過以下方式實現(xiàn):

created(){
 //獲取緩存的數(shù)據(jù)
 if (history.state) {
 Object.assign(this.form, history.state)
 if (this.form.key) {
 delete this.form.key
 }
 }
},

這里記錄下:之前以為created方法是在分頁組件的watch監(jiān)聽之后執(zhí)行的,后來發(fā)現(xiàn)被誤導(dǎo)了(因為之前是通過Object.assign(true, this.form, history.state)方式實現(xiàn)數(shù)據(jù)賦值的,但是并沒有成功)。下面做個小總結(jié):

Object.assign(true, a, b);”和“Object.assign(a, b);”有什么區(qū)別?

結(jié)論:前者:改a不影響b;后者:改a影響b

分析(這篇文章有源碼分析( <font color='red'>求解答:WebStorm中如何關(guān)聯(lián)源碼?</font>),很棒):

www.dbjr.com.cn/article/150037.htm...

FAQ

  • 需要使用history.replaceState方式是因為:它不會將更改后的url壓到history棧中,所以不會增加回退和前進(jìn)的操作步數(shù);
  • 使用history.replaceState方式,可存儲的state大小不能操作640k;
  • 可能存在瀏覽器兼容性問題,請從此處查閱:https://caniuse.com/#feat=his...。

Demo Or Source

因為是公司項目,所以目前沒有Demo或源碼

參考文章

Manipulating the browser history

總結(jié)

以上就是這篇文章的全部內(nèi)容了,希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,如果有疑問大家可以留言交流,謝謝大家對腳本之家的支持。

相關(guān)文章

  • vue中使用sessionStorage記住密碼功能

    vue中使用sessionStorage記住密碼功能

    sessionStorage不是一種持久化的本地存儲,僅僅是會話級別的存儲。這篇文章主要介紹了vue中使用sessionStorage記住密碼功能,需要的朋友可以參考下
    2018-07-07
  • element日期選擇器el-date-picker樣式圖文詳解

    element日期選擇器el-date-picker樣式圖文詳解

    最近寫的項目里面有一個功能是日期選擇功能,第一反應(yīng)是使用element里面的el-date-picker組件,下面這篇文章主要給大家介紹了關(guān)于element日期選擇器el-date-picker樣式的相關(guān)資料,需要的朋友可以參考下
    2022-09-09
  • Vue3+ts+setup?getCurrentInstance使用時遇到的問題以及解決辦法

    Vue3+ts+setup?getCurrentInstance使用時遇到的問題以及解決辦法

    getCurrentInstance方法用于獲取當(dāng)前組件實例,僅在setup和生命周期中起作用,下面這篇文章主要給大家介紹了關(guān)于Vue3+ts+setup?getCurrentInstance使用時遇到的問題以及解決辦法,需要的朋友可以參考下
    2022-08-08
  • vue遞歸組件實現(xiàn)elementUI多級菜單

    vue遞歸組件實現(xiàn)elementUI多級菜單

    這篇文章主要為大家詳細(xì)介紹了vue遞歸組件實現(xiàn)elementUI多級菜單,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2022-07-07
  • vue實現(xiàn)檢測敏感詞過濾組件的多種思路

    vue實現(xiàn)檢測敏感詞過濾組件的多種思路

    這篇文章主要介紹了vue編寫檢測敏感詞匯組件的多種思路,幫助大家更好的理解和學(xué)習(xí)使用vue框架,感興趣的朋友可以了解下
    2021-04-04
  • 詳解vue渲染函數(shù)render的使用

    詳解vue渲染函數(shù)render的使用

    本篇文章主要介紹了vue渲染函數(shù)render的使用,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2017-12-12
  • vue2使用el-tag實現(xiàn)自定義菜單導(dǎo)航標(biāo)簽

    vue2使用el-tag實現(xiàn)自定義菜單導(dǎo)航標(biāo)簽

    這篇文章主要為大家詳細(xì)介紹了vue2如何使用el-tag實現(xiàn)自定義菜單導(dǎo)航標(biāo)簽,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下
    2023-12-12
  • vue+el使用this.$confirm,不能阻斷代碼往下執(zhí)行的解決

    vue+el使用this.$confirm,不能阻斷代碼往下執(zhí)行的解決

    這篇文章主要介紹了vue+el使用this.$confirm,不能阻斷代碼往下執(zhí)行的解決方案,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2022-09-09
  • vue3集成Element-Plus之全局導(dǎo)入和按需導(dǎo)入

    vue3集成Element-Plus之全局導(dǎo)入和按需導(dǎo)入

    這篇文章主要給大家介紹了關(guān)于vue3集成Element-Plus之全局導(dǎo)入和按需導(dǎo)入的相關(guān)資料,element-plus正是element-ui針對于vue3開發(fā)的一個UI組件庫,?它的使用方式和很多其他的組件庫是一樣的,需要的朋友可以參考下
    2023-07-07
  • 解決vue路由組件vue-router實例被復(fù)用問題

    解決vue路由組件vue-router實例被復(fù)用問題

    這篇文章介紹了解決vue路由組件vue-router實例被復(fù)用的問題,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2022-06-06

最新評論