在vue中實(shí)現(xiàn)簡單頁面逆?zhèn)髦档姆椒?/h1>

 更新時(shí)間：2017年11月27日 08:39:37   作者：布爾-  

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

【需求】

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

【聯(lián)想】

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

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

【嘗試】

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

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

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

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

【相關(guān)代碼】

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

 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)呢，之前實(shí)現(xiàn)這些還想著 keepalive 或使用 vuex 等等，想想那樣麻煩多了。

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

總結(jié)

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

您可能感興趣的文章:

• vue頁面params傳值的坑及解決
• 詳解vuejs幾種不同組件（頁面）間傳值的方式
• Vue 中頁面?zhèn)髦档亩喾N方式小結(jié)

• vue
• 頁面
• 逆?zhèn)髦?/a>

相關(guān)文章

• 

  vue移動(dòng)端寫的拖拽功能示例代碼

  這篇文章主要介紹了vue移動(dòng)端寫的拖拽功能，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下

  2020-09-09
• 

  vue自定v-model實(shí)現(xiàn)表單數(shù)據(jù)雙向綁定問題

  vue.js的一大功能便是實(shí)現(xiàn)數(shù)據(jù)的雙向綁定。這篇文章主要介紹了vue自定v-model實(shí)現(xiàn) 表單數(shù)據(jù)雙向綁定的相關(guān)知識，非常不錯(cuò)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下

  2018-09-09
• 

  npm run dev報(bào)錯(cuò)信息及解決方法

  這篇文章主要為大家介紹了npm run dev報(bào)錯(cuò)信息及解決方法,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪

  2023-09-09
• 

  使用Vue-router二級路由跳轉(zhuǎn)另一條路由下的子級

  這篇文章主要介紹了使用Vue-router二級路由跳轉(zhuǎn)另一條路由下的子級問題，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

  2022-10-10
• 

  從零開始在NPM上發(fā)布一個(gè)Vue組件的方法步驟

  這篇文章主要介紹了從零開始在NPM上發(fā)布一個(gè)Vue組件的方法步驟，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧

  2018-12-12
• 

  vue 里面使用axios 和封裝的示例代碼

  本篇文章主要介紹了vue 里面使用axios 和封裝的示例代碼，非常具有實(shí)用價(jià)值，需要的朋友可以參考下

  2017-09-09
• 

  Vue中$router與?$route的區(qū)別詳解

  這篇文章主要介紹了Vue中$router與?$route的區(qū)別詳解，文章圍繞主題展開詳細(xì)的內(nèi)容戒殺，具有一定的參考價(jià)值，需要的朋友可以參考一下

  2022-09-09
• 

  Vue項(xiàng)目中使用better-scroll實(shí)現(xiàn)菜單映射功能方法

  這篇文章主要介紹了Vue項(xiàng)目中使用better-scroll實(shí)現(xiàn)菜單映射功能，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

  2019-09-09
• 

  Vue學(xué)習(xí)之組件用法實(shí)例詳解

  這篇文章主要介紹了Vue學(xué)習(xí)之組件用法,結(jié)合實(shí)例形式分析了vue.js組件的使用流程、模板、父子組件、插槽slot等相關(guān)原理與操作技巧,需要的朋友可以參考下

  2020-01-01
• 

  ElementUI中el-tree節(jié)點(diǎn)的操作的實(shí)現(xiàn)

  這篇文章主要介紹了ElementUI中el-tree節(jié)點(diǎn)的操作的實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

  2020-02-02

最新評論