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

在vue中實現(xiàn)簡單頁面逆?zhèn)髦档姆椒?/h1>
 更新時間：2017年11月27日 08:39:37   作者：布爾-  
vue是一個單頁應(yīng)用，輕量，并且不會重復(fù)下載數(shù)據(jù)。當(dāng)它從一個頁面跳轉(zhuǎn)到另一個頁面時，原來的頁面的vue實例和相關(guān)數(shù)據(jù)已經(jīng)銷毀了，要實現(xiàn)逆?zhèn)髦稻鸵业讲僮鞯膶ο蠹八囊恍傩?/div>

【需求】

　　要實現(xiàn)的需求很簡單，頁面從A -> B，用戶在B觸發(fā)操作，將一些數(shù)據(jù)帶回到A頁面，在網(wǎng)上找了好久也只看到有人問，但總找不到很好答案。要實現(xiàn)的效果圖如下:

【聯(lián)想】

　　在 ios 開發(fā)中，頁面跳轉(zhuǎn) A -> B -> C，到 C 頁面后，內(nèi)存中一直存儲著 A 和 B 頁面的數(shù)據(jù)和狀態(tài)，通過導(dǎo)航堆棧遍歷數(shù)組可以拿到之前的頁面進行修改賦值等，另外還有代理，block傳值等操作?！　?/p>

　　vue是一個單頁應(yīng)用，輕量，并且不會重復(fù)下載數(shù)據(jù)。當(dāng)它從一個頁面跳轉(zhuǎn)到另一個頁面時，原來的頁面的vue實例和相關(guān)數(shù)據(jù)已經(jīng)銷毀了，要實現(xiàn)逆?zhèn)髦稻鸵业讲僮鞯膶ο蠹八囊恍傩浴?/p>

【嘗試】

　　在 three 頁面中打印路由相關(guān)信息，如下：

　　本來是想在其對象中查看是否有可操作的對象，但發(fā)現(xiàn)都不好操作甚至太麻煩，并不像 ios 中一樣。然后嘗試對其中一些對象 prototype 或 __proto__ 主動添加想要存儲的數(shù)據(jù)，實際結(jié)果也是要么報錯不通過，要么路由切換時數(shù)據(jù)就沒了。

　　這兩天又重新看了看vue的官網(wǎng)指導(dǎo)，發(fā)現(xiàn)除了全局路由有對應(yīng)的時機方法，對于組件路由也有幾個對應(yīng)的鉤子函數(shù)。

　　在第三個頁面中實現(xiàn) beforeRouteLeave，打印對應(yīng)的參數(shù)發(fā)現(xiàn)確實可以拿到前后路由。如下:

【相關(guān)代碼】

　　/three 頁面中的 input 與變量 selVal 綁定，然后在此頁面的路由方法中，判斷如果是回第二個頁面，則將要傳的參數(shù)賦值到對應(yīng)query 或 params中，params 中的數(shù)值如果用戶刷新當(dāng)前頁面參數(shù)值會丟失，而query則是拼接在 url 后面，刷新頁面值也不會丟失。如下：

 beforeRouteLeave(to, from, next) {
  if (to.name == 'Two') {
   to.query.temp = this.selVal;
  }
  next();
 }

　　在 /two 頁面的 mounted 方法中獲取相應(yīng)的值

 mounted() {
  if (this.$route.query.temp) {
   this.temp = this.$route.query.temp;
  }
 }

　　這樣就完了，真想說句靠，怎么原來就沒發(fā)現(xiàn)呢，之前實現(xiàn)這些還想著 keepalive 或使用 vuex 等等，想想那樣麻煩多了。

　　ps: 這種簡單的逆?zhèn)髦凳沁@樣實現(xiàn)沒錯，但如果 /two 頁面在進入 /three 頁面之前用戶進行了大量臨時性操作，到 /three 頁頁回來還需要繼續(xù)保持這些大量的操作就比較困難了，這個就等下期博客貼出來了。

總結(jié)

以上所述是小編給大家介紹的在vue中實現(xiàn)簡單頁面逆?zhèn)髦档姆椒ǎＭ麑Υ蠹矣兴鶐椭?，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！

相關(guān)文章

  • Vue 中對圖片地址進行拼接的方法

    Vue 中對圖片地址進行拼接的方法

    今天小編就為大家分享一篇Vue 中對圖片地址進行拼接的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
    2018-09-09
  • 詳解vue 項目白屏解決方案

    詳解vue 項目白屏解決方案

    這篇文章主要介紹了詳解vue 項目白屏解決方案，詳細的介紹了白屏的解決方案，非常具有實用價值，需要的朋友可以參考下
    2018-10-10
  • Vue創(chuàng)建頭部組件示例代碼詳解

    Vue創(chuàng)建頭部組件示例代碼詳解

    本文通過實例代碼給大家介紹了Vue創(chuàng)建頭部組件的相關(guān)知識，非常不錯，具有一定的參考借鑒價值 ,需要的朋友可以參考下
    2018-10-10
  • Vue源碼探究之狀態(tài)初始化

    Vue源碼探究之狀態(tài)初始化

    這篇文章主要介紹了Vue源碼探究之狀態(tài)初始化，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
    2018-11-11
  • 詳解Vue如何通過URL傳遞與獲取參數(shù)

    詳解Vue如何通過URL傳遞與獲取參數(shù)

    Vue Router 路由實際上就是一種映射關(guān)系,例如,多個選項卡之間的切換就可以使用路由功能來實現(xiàn),在實際的開發(fā)中,經(jīng)常需要通過URL來傳遞參數(shù),同時在 JavaScript 腳本中需要獲取URL中的參數(shù),下面將介紹 Vue 項目中,如何通過 URL 對參數(shù)進行傳遞與獲取,需要的朋友可以參考下
    2024-09-09
  • vue Router常用屬性詳解

    vue Router常用屬性詳解

    這篇文章主要介紹了vueRouter常用屬性,本文通過實例代碼給大家介紹的非常詳細，需要的朋友可以參考下
    2023-12-12
  • vue3中使用editor.js的詳細步驟記錄

    vue3中使用editor.js的詳細步驟記錄

    富文本編輯器作為直接與用戶交互的內(nèi)容輸入生產(chǎn)工具,對大家的項目來說非常重要,下面這篇文章主要給大家介紹了關(guān)于vue3中使用editor.js的詳細步驟,需要的朋友可以參考下
    2024-01-01
  • Vue項目打包部署到GitHub Pages的實現(xiàn)步驟

    Vue項目打包部署到GitHub Pages的實現(xiàn)步驟

    本文主要介紹了Vue項目打包部署到GitHub Pages的實現(xiàn)步驟，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2022-04-04
  • vue中$nexttick,$set,$forceupdate的區(qū)別

    vue中$nexttick,$set,$forceupdate的區(qū)別

    本文主要介紹了vue中$nexttick,$set,$forceupdate的區(qū)別，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2023-07-07
  • 詳解vuex狀態(tài)管理模式

    詳解vuex狀態(tài)管理模式

    這篇文章主要介紹了詳解vuex狀態(tài)管理模式，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
    2018-11-11

最新評論