vue，vue-router實現瀏覽器返回不刷新頁面

當咱們在寫單頁應用的時候，前端路由採用vue-router實現，若是從頁面A跳到頁面B，而後點瀏覽器返回，返回到頁面A時，頁面會刷新。最近遇到一個需求，一個列表頁，用戶會根據條件進行篩選，也能夠翻頁，當用戶篩選後點擊具體的某一個條目時，進入詳情頁查看編輯詳情，用戶點擊返回時，但願以前頁面的篩選條件也可以保留。查找相關資料，vue中有個keep-alive組件能夠對組件進行緩存，這樣當頁面返回時就不會刷新頁面。

<keep-alive>
    <router-view></router-view>
</keep-alive>

可是直接keep-alive是強緩存，若是在詳情頁對於該內容作了修改，但願在列表頁的描述中可以體現出來，這個時候但願能夠動態的控制頁面的緩存與否，這個時候結合vue-router去實現，這時候須要對頁面的一些寫法進行改造，具體實現步驟：

一、頁面路由的寫法，其中$route.meta.keepAlive=true則頁面路由放置在keep-alive組件中，表示須要緩存，不然不緩存，這裏就能夠經過控制meta中的keepAlive屬性來控制router-view中的頁面需不須要緩存了。

<keep-alive>
<router-view v-if="$route.meta.keepAlive"></router-view>
</keep-alive>
<router-view v-if="!$route.meta.keepAlive"></router-view>

二、咱們從列表頁A跳轉到詳情頁B時，能夠在url是帶上特殊字段，A頁面在進行跳轉的時候在須要跳轉到的詳情頁url上加上過濾的數據，用來保存篩選條件。

//將篩選條件做爲url的參數
let filterParams = {filterA: '', filterB: ''}
this.$router.push(path+'?backparams='+JSON.stringify(filterParams))

三、詳情頁中的相關配置，再由詳情頁跳轉走時，會首先執行beforeRouteLeave方法，在頁面上經過設置reload參數來控制跳轉到的頁面需不須要緩存。

//to表示將要跳轉頁面的url，在頁面中經過reload參數控制頁面跳轉到的頁面是否須要緩存
beforeRouteLeave (to, from, next){
    to.meta.keepAlive = true;
    if(this.reload){
	to.meta.keepAlive = false;
    }
    next();
}

四、列表頁中的判斷。若是頁面組件緩存後，不會執行vue對象中的beforeMount方法，若是沒有緩存咱們也能夠經過url上帶的過濾參數，在頁面加載前把過濾的數據賦值，從而實現頁面篩選條件保留並且頁面刷新跟新列表條目的數據。

let fromparams = '';
//vue對象中
beforeRouteEnter (to, from, next){
        if(from.query.backparams){
            fromparams = from.query.backparams;
        }
        next();
}
beforeMount (){
        if(fromparams.length>0){
            let params = JSON.parse(fromparams);
            //將url上帶回的參數賦值給vue中的data對象,從而實現條件的帶回
            this.date  = params.date;
            this.status = params.status
            this.page = params.page;
            ......
        }
}   　

若是多個列表對應一個詳情頁時，能夠在url上帶上某個具體頁面的標識參數，這樣就能夠控制某個具體頁面的緩存。這種設置很是的靈活，能夠動態的控制頁面的緩存與否。

 

補充：

//頁面寫法1
<keep-alive>
<router-view v-if="$route.meta.keepAlive"></router-view>
</keep-alive>
<router-view v-if="!$route.meta.keepAlive"></router-view>　
//修改成寫法2
<router-view></router-view>

若是經過在url上帶參數的方法，能夠直接去掉<keep-Alive>組件，由於寫法1有兩個router-view，當咱們修改詳情頁B，而後跳到列表頁A，A頁面不緩存組件，且刷新了列表，可是兩個router-view致使keep-alive組件包裹的view頁面並無刷新仍是老的狀態頁面，這時咱們再點擊列表頁查看其它的詳情頁，再點返回時，這個時候列表頁用的是帶有keep-alive緩存的頁面，列表頁中以前咱們改的詳情頁的狀態字段並無在緩存的列表頁刷新，顯示的仍是老的狀態，因此咱們就完全廢棄掉vue提供的keep-Alive緩存組件，本身實現控制返回帶入以前篩選的條件，給用戶一種沒有刷新的體驗。

若是頁面只是，沒有寫的操做，那麼能夠直接用keep-alive寫法1來實現頁面緩存且不須要帶backparams參數。