在vue中實(shí)現(xiàn)簡(jiǎn)單頁(yè)面逆?zhèn)髦档姆椒?/h1>
更新時(shí)間：2017年11月27日 08:39:37 作者：布爾-
vue是一個(gè)單頁(yè)應(yīng)用，輕量，并且不會(huì)重復(fù)下載數(shù)據(jù)。當(dāng)它從一個(gè)頁(yè)面跳轉(zhuǎn)到另一個(gè)頁(yè)面時(shí)，原來(lái)的頁(yè)面的vue實(shí)例和相關(guān)數(shù)據(jù)已經(jīng)銷(xiāo)毀了，要實(shí)現(xiàn)逆?zhèn)髦稻鸵业讲僮鞯膶?duì)象及它的一些屬性
【需求】
要實(shí)現(xiàn)的需求很簡(jiǎn)單，頁(yè)面從A -> B，用戶在B觸發(fā)操作，將一些數(shù)據(jù)帶回到A頁(yè)面，在網(wǎng)上找了好久也只看到有人問(wèn)，但總找不到很好答案。要實(shí)現(xiàn)的效果圖如下:
【聯(lián)想】
在 ios 開(kāi)發(fā)中，頁(yè)面跳轉(zhuǎn) A -> B -> C，到 C 頁(yè)面后，內(nèi)存中一直存儲(chǔ)著 A 和 B 頁(yè)面的數(shù)據(jù)和狀態(tài)，通過(guò)導(dǎo)航堆棧遍歷數(shù)組可以拿到之前的頁(yè)面進(jìn)行修改賦值等，另外還有代理，block傳值等操作?！ ?/p>
vue是一個(gè)單頁(yè)應(yīng)用，輕量，并且不會(huì)重復(fù)下載數(shù)據(jù)。當(dāng)它從一個(gè)頁(yè)面跳轉(zhuǎn)到另一個(gè)頁(yè)面時(shí)，原來(lái)的頁(yè)面的vue實(shí)例和相關(guān)數(shù)據(jù)已經(jīng)銷(xiāo)毀了，要實(shí)現(xiàn)逆?zhèn)髦稻鸵业讲僮鞯膶?duì)象及它的一些屬性。
【嘗試】
在 three 頁(yè)面中打印路由相關(guān)信息，如下：
本來(lái)是想在其對(duì)象中查看是否有可操作的對(duì)象，但發(fā)現(xiàn)都不好操作甚至太麻煩，并不像 ios 中一樣。然后嘗試對(duì)其中一些對(duì)象 prototype 或 __proto__ 主動(dòng)添加想要存儲(chǔ)的數(shù)據(jù)，實(shí)際結(jié)果也是要么報(bào)錯(cuò)不通過(guò)，要么路由切換時(shí)數(shù)據(jù)就沒(méi)了。
這兩天又重新看了看vue的官網(wǎng)指導(dǎo)，發(fā)現(xiàn)除了全局路由有對(duì)應(yīng)的時(shí)機(jī)方法，對(duì)于組件路由也有幾個(gè)對(duì)應(yīng)的鉤子函數(shù)。
在第三個(gè)頁(yè)面中實(shí)現(xiàn) beforeRouteLeave，打印對(duì)應(yīng)的參數(shù)發(fā)現(xiàn)確實(shí)可以拿到前后路由。如下:
【相關(guān)代碼】
/three 頁(yè)面中的 input 與變量 selVal 綁定，然后在此頁(yè)面的路由方法中，判斷如果是回第二個(gè)頁(yè)面，則將要傳的參數(shù)賦值到對(duì)應(yīng)query 或 params中，params 中的數(shù)值如果用戶刷新當(dāng)前頁(yè)面參數(shù)值會(huì)丟失，而query則是拼接在 url 后面，刷新頁(yè)面值也不會(huì)丟失。如下：
beforeRouteLeave(to, from, next) {
if (to.name == 'Two') {
to.query.temp = this.selVal;
}
next();
}
在 /two 頁(yè)面的 mounted 方法中獲取相應(yīng)的值
mounted() {
if (this.$route.query.temp) {
this.temp = this.$route.query.temp;
}
}
這樣就完了，真想說(shuō)句靠，怎么原來(lái)就沒(méi)發(fā)現(xiàn)呢，之前實(shí)現(xiàn)這些還想著 keepalive 或使用 vuex 等等，想想那樣麻煩多了。
ps: 這種簡(jiǎn)單的逆?zhèn)髦凳沁@樣實(shí)現(xiàn)沒(méi)錯(cuò)，但如果 /two 頁(yè)面在進(jìn)入 /three 頁(yè)面之前用戶進(jìn)行了大量臨時(shí)性操作，到 /three 頁(yè)頁(yè)回來(lái)還需要繼續(xù)保持這些大量的操作就比較困難了，這個(gè)就等下期博客貼出來(lái)了。
總結(jié)
以上所述是小編給大家介紹的在vue中實(shí)現(xiàn)簡(jiǎn)單頁(yè)面逆?zhèn)髦档姆椒?，希望?duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
相關(guān)文章
-
今天小編就為大家分享一篇Vue 中對(duì)圖片地址進(jìn)行拼接的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧 2018-09-09
-
這篇文章主要介紹了詳解vue 項(xiàng)目白屏解決方案，詳細(xì)的介紹了白屏的解決方案，非常具有實(shí)用價(jià)值，需要的朋友可以參考下 2018-10-10
-
本文通過(guò)實(shí)例代碼給大家介紹了Vue創(chuàng)建頭部組件的相關(guān)知識(shí)，非常不錯(cuò)，具有一定的參考借鑒價(jià)值 ,需要的朋友可以參考下 2018-10-10
-
這篇文章主要介紹了Vue源碼探究之狀態(tài)初始化，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧 2018-11-11
-
Vue Router 路由實(shí)際上就是一種映射關(guān)系,例如,多個(gè)選項(xiàng)卡之間的切換就可以使用路由功能來(lái)實(shí)現(xiàn),在實(shí)際的開(kāi)發(fā)中,經(jīng)常需要通過(guò)URL來(lái)傳遞參數(shù),同時(shí)在 JavaScript 腳本中需要獲取URL中的參數(shù),下面將介紹 Vue 項(xiàng)目中,如何通過(guò) URL 對(duì)參數(shù)進(jìn)行傳遞與獲取,需要的朋友可以參考下 2024-09-09
-
這篇文章主要介紹了vueRouter常用屬性,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，需要的朋友可以參考下 2023-12-12
-
富文本編輯器作為直接與用戶交互的內(nèi)容輸入生產(chǎn)工具,對(duì)大家的項(xiàng)目來(lái)說(shuō)非常重要,下面這篇文章主要給大家介紹了關(guān)于vue3中使用editor.js的詳細(xì)步驟,需要的朋友可以參考下 2024-01-01
-
Vue項(xiàng)目打包部署到GitHub Pages的實(shí)現(xiàn)步驟
本文主要介紹了Vue項(xiàng)目打包部署到GitHub Pages的實(shí)現(xiàn)步驟，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧 2022-04-04
-
vue中$nexttick,$set,$forceupdate的區(qū)別
本文主要介紹了vue中$nexttick,$set,$forceupdate的區(qū)別，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧 2023-07-07
-
這篇文章主要介紹了詳解vuex狀態(tài)管理模式，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧 2018-11-11
最新評(píng)論
【需求】
要實(shí)現(xiàn)的需求很簡(jiǎn)單，頁(yè)面從A -> B，用戶在B觸發(fā)操作，將一些數(shù)據(jù)帶回到A頁(yè)面，在網(wǎng)上找了好久也只看到有人問(wèn)，但總找不到很好答案。要實(shí)現(xiàn)的效果圖如下:
【聯(lián)想】
在 ios 開(kāi)發(fā)中，頁(yè)面跳轉(zhuǎn) A -> B -> C，到 C 頁(yè)面后，內(nèi)存中一直存儲(chǔ)著 A 和 B 頁(yè)面的數(shù)據(jù)和狀態(tài)，通過(guò)導(dǎo)航堆棧遍歷數(shù)組可以拿到之前的頁(yè)面進(jìn)行修改賦值等，另外還有代理，block傳值等操作?！ ?/p>
vue是一個(gè)單頁(yè)應(yīng)用，輕量，并且不會(huì)重復(fù)下載數(shù)據(jù)。當(dāng)它從一個(gè)頁(yè)面跳轉(zhuǎn)到另一個(gè)頁(yè)面時(shí)，原來(lái)的頁(yè)面的vue實(shí)例和相關(guān)數(shù)據(jù)已經(jīng)銷(xiāo)毀了，要實(shí)現(xiàn)逆?zhèn)髦稻鸵业讲僮鞯膶?duì)象及它的一些屬性。
【嘗試】
在 three 頁(yè)面中打印路由相關(guān)信息，如下：
本來(lái)是想在其對(duì)象中查看是否有可操作的對(duì)象，但發(fā)現(xiàn)都不好操作甚至太麻煩，并不像 ios 中一樣。然后嘗試對(duì)其中一些對(duì)象 prototype 或 __proto__ 主動(dòng)添加想要存儲(chǔ)的數(shù)據(jù)，實(shí)際結(jié)果也是要么報(bào)錯(cuò)不通過(guò)，要么路由切換時(shí)數(shù)據(jù)就沒(méi)了。
這兩天又重新看了看vue的官網(wǎng)指導(dǎo)，發(fā)現(xiàn)除了全局路由有對(duì)應(yīng)的時(shí)機(jī)方法，對(duì)于組件路由也有幾個(gè)對(duì)應(yīng)的鉤子函數(shù)。
在第三個(gè)頁(yè)面中實(shí)現(xiàn) beforeRouteLeave，打印對(duì)應(yīng)的參數(shù)發(fā)現(xiàn)確實(shí)可以拿到前后路由。如下:
【相關(guān)代碼】
/three 頁(yè)面中的 input 與變量 selVal 綁定，然后在此頁(yè)面的路由方法中，判斷如果是回第二個(gè)頁(yè)面，則將要傳的參數(shù)賦值到對(duì)應(yīng)query 或 params中，params 中的數(shù)值如果用戶刷新當(dāng)前頁(yè)面參數(shù)值會(huì)丟失，而query則是拼接在 url 后面，刷新頁(yè)面值也不會(huì)丟失。如下：
beforeRouteLeave(to, from, next) {
if (to.name == 'Two') {
to.query.temp = this.selVal;
}
next();
}
在 /two 頁(yè)面的 mounted 方法中獲取相應(yīng)的值
mounted() {
if (this.$route.query.temp) {
this.temp = this.$route.query.temp;
}
}
這樣就完了，真想說(shuō)句靠，怎么原來(lái)就沒(méi)發(fā)現(xiàn)呢，之前實(shí)現(xiàn)這些還想著 keepalive 或使用 vuex 等等，想想那樣麻煩多了。
ps: 這種簡(jiǎn)單的逆?zhèn)髦凳沁@樣實(shí)現(xiàn)沒(méi)錯(cuò)，但如果 /two 頁(yè)面在進(jìn)入 /three 頁(yè)面之前用戶進(jìn)行了大量臨時(shí)性操作，到 /three 頁(yè)頁(yè)回來(lái)還需要繼續(xù)保持這些大量的操作就比較困難了，這個(gè)就等下期博客貼出來(lái)了。
總結(jié)
以上所述是小編給大家介紹的在vue中實(shí)現(xiàn)簡(jiǎn)單頁(yè)面逆?zhèn)髦档姆椒?，希望?duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
相關(guān)文章
- 今天小編就為大家分享一篇Vue 中對(duì)圖片地址進(jìn)行拼接的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-09-09
- 這篇文章主要介紹了詳解vue 項(xiàng)目白屏解決方案，詳細(xì)的介紹了白屏的解決方案，非常具有實(shí)用價(jià)值，需要的朋友可以參考下2018-10-10
- 本文通過(guò)實(shí)例代碼給大家介紹了Vue創(chuàng)建頭部組件的相關(guān)知識(shí)，非常不錯(cuò)，具有一定的參考借鑒價(jià)值 ,需要的朋友可以參考下2018-10-10
- 這篇文章主要介紹了Vue源碼探究之狀態(tài)初始化，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-11-11
- Vue Router 路由實(shí)際上就是一種映射關(guān)系,例如,多個(gè)選項(xiàng)卡之間的切換就可以使用路由功能來(lái)實(shí)現(xiàn),在實(shí)際的開(kāi)發(fā)中,經(jīng)常需要通過(guò)URL來(lái)傳遞參數(shù),同時(shí)在 JavaScript 腳本中需要獲取URL中的參數(shù),下面將介紹 Vue 項(xiàng)目中,如何通過(guò) URL 對(duì)參數(shù)進(jìn)行傳遞與獲取,需要的朋友可以參考下2024-09-09
- 這篇文章主要介紹了vueRouter常用屬性,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，需要的朋友可以參考下2023-12-12
- 富文本編輯器作為直接與用戶交互的內(nèi)容輸入生產(chǎn)工具,對(duì)大家的項(xiàng)目來(lái)說(shuō)非常重要,下面這篇文章主要給大家介紹了關(guān)于vue3中使用editor.js的詳細(xì)步驟,需要的朋友可以參考下2024-01-01
-
Vue項(xiàng)目打包部署到GitHub Pages的實(shí)現(xiàn)步驟
本文主要介紹了Vue項(xiàng)目打包部署到GitHub Pages的實(shí)現(xiàn)步驟，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2022-04-04 -
vue中$nexttick,$set,$forceupdate的區(qū)別
本文主要介紹了vue中$nexttick,$set,$forceupdate的區(qū)別，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-07-07 - 這篇文章主要介紹了詳解vuex狀態(tài)管理模式，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-11-11