vue，vue-router实现浏览器返回不刷新页面

Posted 2020-11-09 leejay的博客

当我们在写单页应用的时候，前端路由采用vue-router实现，如果从页面A跳到页面B，然后点浏览器返回，返回到页面A时，页面会刷新。最近遇到一个需求，一个列表页，用户会根据条件进行筛选，也可以翻页，当用户筛选后点击具体的某一个条目时，进入详情页查看编辑详情，用户点击返回时，希望之前页面的筛选条件也能够保留。查找相关资料，vue中有个keep-alive组件可以对组件进行缓存，这样当页面返回时就不会刷新页面。

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

但是直接keep-alive是强缓存，如果在详情页对于该内容做了修改，希望在列表页的描述中能够体现出来，这个时候希望可以动态的控制页面的缓存与否，这个时候结合vue-router去实现，这时候需要对页面的一些写法进行改造，具体实现步骤：

1、页面路由的写法，其中$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>

2、我们从列表页A跳转到详情页B时，可以在url是带上特殊字段，A页面在进行跳转的时候在需要跳转到的详情页url上加上过滤的数据，用来保存筛选条件。

//将筛选条件作为url的参数
let filterParams = {filterA: ‘‘, filterB: ‘‘}
this.$router.push(path+‘?backparams=‘+JSON.stringify(filterParams))

3、详情页中的相关配置，再由详情页跳转走时，会首先执行beforeRouteLeave方法，在页面上通过设置reload参数来控制跳转到的页面需不需要缓存。

//to表示将要跳转页面的url，在页面中通过reload参数控制页面跳转到的页面是否需要缓存
beforeRouteLeave (to, from, next){
    to.meta.keepAlive = true;
    if(this.reload){
	to.meta.keepAlive = false;
    }
    next();
}

4、列表页中的判断。如果页面组件缓存后，不会执行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上带上某个具体页面的标识参数，这样就可以控制某个具体页面的缓存。这种设置非常的灵活，可以动态的控制页面的缓存与否。