在vue中實現(xiàn)簡單頁面逆?zhèn)髦档姆椒?/h1>
更新時間：2017年11月27日 08:39:37 作者：布爾-
vue是一個單頁應用，輕量，并且不會重復下載數(shù)據(jù)。當它從一個頁面跳轉(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)，通過導航堆棧遍歷數(shù)組可以拿到之前的頁面進行修改賦值等，另外還有代理，block傳值等操作?！ ?/p>
vue是一個單頁應用，輕量，并且不會重復下載數(shù)據(jù)。當它從一個頁面跳轉(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)指導，發(fā)現(xiàn)除了全局路由有對應的時機方法，對于組件路由也有幾個對應的鉤子函數(shù)。
在第三個頁面中實現(xiàn) beforeRouteLeave，打印對應的參數(shù)發(fā)現(xiàn)確實可以拿到前后路由。如下:
【相關(guān)代碼】
/three 頁面中的 input 與變量 selVal 綁定，然后在此頁面的路由方法中，判斷如果是回第二個頁面，則將要傳的參數(shù)賦值到對應query 或 params中，params 中的數(shù)值如果用戶刷新當前頁面參數(shù)值會丟失，而query則是拼接在 url 后面，刷新頁面值也不會丟失。如下：
beforeRouteLeave(to, from, next) {
if (to.name == 'Two') {
to.query.temp = this.selVal;
}
next();
}
在 /two 頁面的 mounted 方法中獲取相應的值
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)髦档姆椒?，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
相關(guān)文章
-
這篇文章主要介紹了vue移動端寫的拖拽功能，本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下 2020-09-09
-
vue自定v-model實現(xiàn)表單數(shù)據(jù)雙向綁定問題
vue.js的一大功能便是實現(xiàn)數(shù)據(jù)的雙向綁定。這篇文章主要介紹了vue自定v-model實現(xiàn) 表單數(shù)據(jù)雙向綁定的相關(guān)知識，非常不錯，具有一定的參考借鑒價值,需要的朋友可以參考下 2018-09-09
-
這篇文章主要為大家介紹了npm run dev報錯信息及解決方法,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪 2023-09-09
-
使用Vue-router二級路由跳轉(zhuǎn)另一條路由下的子級
這篇文章主要介紹了使用Vue-router二級路由跳轉(zhuǎn)另一條路由下的子級問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教 2022-10-10
-
這篇文章主要介紹了從零開始在NPM上發(fā)布一個Vue組件的方法步驟，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧 2018-12-12
-
本篇文章主要介紹了vue 里面使用axios 和封裝的示例代碼，非常具有實用價值，需要的朋友可以參考下
2017-09-09
-
這篇文章主要介紹了Vue中$router與?$route的區(qū)別詳解，文章圍繞主題展開詳細的內(nèi)容戒殺，具有一定的參考價值，需要的朋友可以參考一下 2022-09-09
-
Vue項目中使用better-scroll實現(xiàn)菜單映射功能方法
這篇文章主要介紹了Vue項目中使用better-scroll實現(xiàn)菜單映射功能，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧 2019-09-09
-
這篇文章主要介紹了Vue學習之組件用法,結(jié)合實例形式分析了vue.js組件的使用流程、模板、父子組件、插槽slot等相關(guān)原理與操作技巧,需要的朋友可以參考下 2020-01-01
-
ElementUI中el-tree節(jié)點的操作的實現(xiàn)
這篇文章主要介紹了ElementUI中el-tree節(jié)點的操作的實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧 2020-02-02
最新評論
【需求】
要實現(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)，通過導航堆棧遍歷數(shù)組可以拿到之前的頁面進行修改賦值等，另外還有代理，block傳值等操作?！ ?/p>
vue是一個單頁應用，輕量，并且不會重復下載數(shù)據(jù)。當它從一個頁面跳轉(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)指導，發(fā)現(xiàn)除了全局路由有對應的時機方法，對于組件路由也有幾個對應的鉤子函數(shù)。
在第三個頁面中實現(xiàn) beforeRouteLeave，打印對應的參數(shù)發(fā)現(xiàn)確實可以拿到前后路由。如下:
【相關(guān)代碼】
/three 頁面中的 input 與變量 selVal 綁定，然后在此頁面的路由方法中，判斷如果是回第二個頁面，則將要傳的參數(shù)賦值到對應query 或 params中，params 中的數(shù)值如果用戶刷新當前頁面參數(shù)值會丟失，而query則是拼接在 url 后面，刷新頁面值也不會丟失。如下：
beforeRouteLeave(to, from, next) {
if (to.name == 'Two') {
to.query.temp = this.selVal;
}
next();
}
在 /two 頁面的 mounted 方法中獲取相應的值
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)髦档姆椒?，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
相關(guān)文章
- 這篇文章主要介紹了vue移動端寫的拖拽功能，本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-09-09
-
vue自定v-model實現(xiàn)表單數(shù)據(jù)雙向綁定問題
vue.js的一大功能便是實現(xiàn)數(shù)據(jù)的雙向綁定。這篇文章主要介紹了vue自定v-model實現(xiàn) 表單數(shù)據(jù)雙向綁定的相關(guān)知識，非常不錯，具有一定的參考借鑒價值,需要的朋友可以參考下2018-09-09 - 這篇文章主要為大家介紹了npm run dev報錯信息及解決方法,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-09-09
-
使用Vue-router二級路由跳轉(zhuǎn)另一條路由下的子級
這篇文章主要介紹了使用Vue-router二級路由跳轉(zhuǎn)另一條路由下的子級問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10 - 這篇文章主要介紹了從零開始在NPM上發(fā)布一個Vue組件的方法步驟，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-12-12
- 本篇文章主要介紹了vue 里面使用axios 和封裝的示例代碼，非常具有實用價值，需要的朋友可以參考下2017-09-09
- 這篇文章主要介紹了Vue中$router與?$route的區(qū)別詳解，文章圍繞主題展開詳細的內(nèi)容戒殺，具有一定的參考價值，需要的朋友可以參考一下2022-09-09
-
Vue項目中使用better-scroll實現(xiàn)菜單映射功能方法
這篇文章主要介紹了Vue項目中使用better-scroll實現(xiàn)菜單映射功能，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-09-09 - 這篇文章主要介紹了Vue學習之組件用法,結(jié)合實例形式分析了vue.js組件的使用流程、模板、父子組件、插槽slot等相關(guān)原理與操作技巧,需要的朋友可以參考下2020-01-01
-
ElementUI中el-tree節(jié)點的操作的實現(xiàn)
這篇文章主要介紹了ElementUI中el-tree節(jié)點的操作的實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-02-02