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参数。