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

转载于https://www.cnblogs.com/leejay6567/p/9096187.html

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

<keep-alive>

    <router-view></router-view>

</keep-alive>

1、页面路由的写法，其中$route.meta.keepAlive=true则页面路由放置在keep-alive组件中，表示需要缓存，否则不缓存，这里就可以通过控制meta中的keepAlive属性来控制router-view中的页面需不需要缓存了。但是直接keep-alive是强缓存，如果在详情页对于该内容做了修改，希望在列表页的描述中能够体现出来，这个时候希望可以动态的控制页面的缓存与否，这个时候结合vue-router去实现，这时候需要对页面的一些写法进行改造，具体实现步骤：

<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的参数<br>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上带上某个具体页面的标识参数，这样就可以控制某个具体页面的缓存。这种设置非常的灵活，可以动态的控制页面的缓存与否。

补充：

//页面写法1
<keep-alive>

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

</keep-alive>

<router-view v-if="!$route.meta.keepAlive"></router-view>　<br>
//修改为写法2
<router-view></router-view>

如果页面只是，没有写的操作，那么可以直接用keep-alive写法1来实现页面缓存且不需要带backparams参数。如果通过在url上带参数的方法，可以直接去掉<keep-Alive>组件，因为写法1有两个router-view，当我们修改详情页B，然后跳到列表页A，A页面不缓存组件，且刷新了列表，但是两个router-view导致keep-alive组件包裹的view页面并没有刷新还是老的状态页面，这时我们再点击列表页查看其它的详情页，再点返回时，这个时候列表页用的是带有keep-alive缓存的页面，列表页中之前我们改的详情页的状态字段并没有在缓存的列表页刷新，显示的还是老的状态，所以我们就彻底废弃掉vue提供的keep-Alive缓存组件，自己实现控制返回带入之前筛选的条件，给用户一种没有刷新的体验。

如果页面只读，没有写的操作，那么可以直接用keep-alive写法1来实现页面缓存且不需要带backparams参数。