vue 后退不刷新页面

使用 this.$router.push({path: '/aichat'})路由跳转方式跳转页面

要实现 home => chat  chat页面刷新；

           chat => report, 

          report => chat    chat 页面不刷新

即从report 返回到 chat chat页面不刷新 保留原来的记录

使用 vue.js 提供的动态组件 keep -alive 实现

在App.vue中

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

 

在路由 index.js中加 标识 表示此页面需要缓存：meta: { keepAlive:  true }

{ path:'/aichat/:id',name:'aichat', component: resolve => require(['../components/zixun/aichat'], resolve), meta:{keepAlive: true} },

 

chat页面

注意：因为这里是路由跳转到这个chat页面，所以这么处理

 

script里：

　　　　//生命周期最早
        beforeRouteEnter(to, from, next) {
            //判断是从哪个路由过来的 从下面这两个页面进来，就为false即刷新页面，其他页面就为true，不刷新页面
            if(from.name ==='zxhome' || from.name === 'home'){
                to.meta.keepAlive = false;
            }else{
                to.meta.keepAlive = true;
            }
            next();
        },

 生命周期 activated只有加了keep-alive 并且后退的时候触发  

每次将question数据保存到store仓库，在后退的时候重新刷新当前的数据，否则每次页面保存的都是首次数据

 　　　　activated(){
            this.question = this.$store.state.question
        },

 

在report页面

　　　　beforeRouteLeave(to, from, next) {
            // 设置下一个路由的 meta
            to.meta.keepAlive = true;  // 让 A 缓存，即不刷新
            next();
        },