成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

再談vue前進(jìn)刷新，后退不刷新，include實(shí)現(xiàn)方法。

layman / 2622人閱讀

摘要：并設(shè)置后退頁面數(shù)組。跳轉(zhuǎn)到或頁面，返回后回到緩存頁面，不刷新。由其他頁面進(jìn)入則刷新。反正目前可以實(shí)現(xiàn)想要的效果。

關(guān)于填坑vue的前進(jìn)刷新與后退不刷新，網(wǎng)上有很多方法，基本都是利用 keep-alive，但是試了好多種方法都不盡人意，后來有人提示說基于keepalive include，試驗(yàn)了一下找到了些思路，暫時(shí)實(shí)驗(yàn)可行，分享下共同探討學(xué)習(xí)，也許不是最佳解決方案，但確實(shí)有效。這里需要用到vuex，如不用vuex可以自行用Local Storage代替。

1.修改主路由頁面，keep-alive 標(biāo)簽添加 include
2.同時(shí)此頁面添加自動(dòng)computed includeds 
computed:{
    includeds(){
        return this.$store.state.includeds
    }
 }
3.修改vuex的store，添加includeds對(duì)象，并添加commit方法。此處如不用vuex，也可自行設(shè)置Local Storage。 
state: {
    includes: ""
},
mutations: {
    setIncludeds(state,setdata){
        state.includeds = setdata
    }
}
4.在main.js頁面添加beforeEach路由守衛(wèi)。并設(shè)置后退頁面數(shù)組。如不用全局守衛(wèi)，也可在頁面多帶帶設(shè)置多帶帶寫beforeRouteLeave，方法相同。 
router.beforeEach((to, from, next) => {
    let addPage = ["addProduct","newEdit","showNews"];
    if (!mCd.inArray(to.name,addPage)) { //此處mCd.inArray的方法為判斷數(shù)組是否包含，需要自己實(shí)現(xiàn)。
        store.commit("setIncludeds","");
    }
    next();
})
5.設(shè)置頁面（news.vue)的name和activated 
export default{
    name: "news",
    data() {
        return {
            ....
        }
    },
    activated(){
        this.$store.commit("setIncludeds","news"); //此處設(shè)置name一致的名稱
    }
}
*注意：此處activated里設(shè)置的commit里第二個(gè)參數(shù)，必須與name名稱一致。
6.然后就可以了。 原理解析： 
1. 通過設(shè)置keepalive 的 include，當(dāng)然也可以設(shè)置exclude，自行百度。include為要緩存的頁面name
2. 在頁面activated的時(shí)候設(shè)置為緩存當(dāng)前頁面。
3. 頁面跳轉(zhuǎn)的時(shí)候判斷路由的to.name是否包含在已設(shè)置的數(shù)組中。
4. 跳轉(zhuǎn)到edit或show頁面，返回后回到緩存頁面，不刷新。由其他頁面進(jìn)入則刷新。
5. 如果不設(shè)置路由全局守衛(wèi)，也可以每個(gè)頁面多帶帶寫beforeRouteLeave
也不知道這樣寫對(duì)不對(duì)。反正目前可以實(shí)現(xiàn)想要的效果。另外路由嵌套不是很深。如果哪位大俠有更好的方法，歡迎提供。^_^

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/96124.html

相關(guān)文章

  • 另辟蹊徑：vue單頁面，多路由，前進(jìn)刷新，后退不刷新

    摘要：如何添加這個(gè)條件，判斷用戶是否刷新了頁面呢我們知道，當(dāng)使用后，只有第一次進(jìn)入后會(huì)觸發(fā)鉤子函數(shù)，再次進(jìn)入就不再執(zhí)行了。 目的：vue-cli構(gòu)建的vue單頁面應(yīng)用，某些特定的頁面，實(shí)現(xiàn)前進(jìn)刷新，后退不刷新，類似app般的用戶體驗(yàn)。注：　此處的刷新特指當(dāng)進(jìn)入此頁面時(shí)，觸發(fā)ajax請(qǐng)求，向服務(wù)器獲取數(shù)據(jù)。不刷新特指當(dāng)進(jìn)入此頁面時(shí)，不觸發(fā)ajax請(qǐng)求，而是使用之前緩存的數(shù)據(jù)，以便減少服務(wù)器請(qǐng)求...

    Ocean 評(píng)論0 收藏0

  • 實(shí)現(xiàn)一個(gè)前端路由，如何實(shí)現(xiàn)瀏覽器的前進(jìn)與后退 ？

    摘要：執(zhí)行過程如下實(shí)現(xiàn)瀏覽器的前進(jìn)后退第二個(gè)方法就是用兩個(gè)棧實(shí)現(xiàn)瀏覽器的前進(jìn)后退功能。我們使用兩個(gè)棧，和，我們把首次瀏覽的頁面依次壓入棧，當(dāng)點(diǎn)擊后退按鈕時(shí)，再依次從棧中出棧，并將出棧的數(shù)據(jù)依次放入棧。 showImg(https://segmentfault.com/img/bVbtK6U?w=1280&h=910); 如果要你實(shí)現(xiàn)一個(gè)前端路由，應(yīng)該如何實(shí)現(xiàn)瀏覽器的前進(jìn)與后退 ？ 2. 問題...

    劉東 評(píng)論0 收藏0

  • Vue 實(shí)現(xiàn)前進(jìn)刷新，后退不刷新的效果

    摘要：點(diǎn)擊某個(gè)列表項(xiàng)，跳到詳情頁，再?gòu)脑斍轫摵笸嘶氐搅斜眄摃r(shí)，不刷新。也就是說從其他頁面進(jìn)到列表頁，需要刷新獲取數(shù)據(jù)，從詳情頁返回到列表頁時(shí)不要刷新。 更多文章 需求一： 在一個(gè)列表頁中，第一次進(jìn)入的時(shí)候，請(qǐng)求獲取數(shù)據(jù)。點(diǎn)擊某個(gè)列表項(xiàng)，跳到詳情頁，再?gòu)脑斍轫摵笸嘶氐搅斜眄摃r(shí)，不刷新。也就是說從其他頁面進(jìn)到列表頁，需要刷新獲取數(shù)據(jù)，從詳情頁返回到列表頁時(shí)不要刷新。 解決方案 在 App.vue...

    zhisheng 評(píng)論0 收藏0

  • 原生 js 實(shí)現(xiàn)一個(gè)前端路由 router

    摘要：實(shí)現(xiàn)原理現(xiàn)在前端的路由實(shí)現(xiàn)一般有兩種，一種是路由，另外一種是路由。現(xiàn)在的前端主流框架的路由實(shí)現(xiàn)方式都會(huì)采用路由，本項(xiàng)目采用的也是。當(dāng)值發(fā)生改變的時(shí)候，我們可以通過事件監(jiān)聽到，從而在回調(diào)函數(shù)里面觸發(fā)某些方法。 效果圖： showImg(https://segmentfault.com/img/remote/1460000018058419?w=422&h=744); 項(xiàng)目地址：https...

    gggggggbong 評(píng)論0 收藏0

  • 國(guó)內(nèi)存在感最低的前端API——瀏覽器路由

    摘要：最新一直在看關(guān)于和路由這塊的知識(shí)，最終發(fā)現(xiàn)這些路由框架的模塊功能的實(shí)現(xiàn)都是基于瀏覽器原生路由的。在瀏覽器中實(shí)現(xiàn)前端路由主要有兩種方式一個(gè)是我們常用的，另一個(gè)是提供的。該對(duì)象的和分別表示的各個(gè)部分，它們因此被稱為分解屬性。 最新一直在看關(guān)于 Vue 和 React 路由這塊的知識(shí)，最終發(fā)現(xiàn)這些路由框架的模塊功能的實(shí)現(xiàn)都是基于瀏覽器原生路由 API?的。本著追根溯源的初心，于是就想著將瀏覽...

    U2FsdGVkX1x 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<