vue网页返回不刷新

keep-alive 是 Vue 内置的一个组件，使被包含的组件保留状态，或避免重新渲染。

1、用法的话是这个样子

<keep-alive>
　　<router-view>
　　　　<!-- 这里是会被缓存所有的视图组件 -->
　　</router-view>
</keep-alive>

2.1、上面的用法会缓存全部组件，如果只想缓存其中一些的话

可以使用include，exclude两个属性，include="选中组件被缓存"，exclude="选中组件外都缓存"

/*缓存组件Refund*/
<keep-alive include="Refund">
    <router-view/>
</keep-alive>

2.2另一种用法就是结合vue-router 缓存指定路由，所以这次在router.js里面改

export default [
  {
    path: '/Refund',
    name: 'Refund',
    component: Refund,
    meta: {
      keepAlive: true // 需要被缓存
    }
  }, {
    path: '/MyRefund,
    name: 'MyRefund',
    component: MyRefund,
    meta: {
      keepAlive: false // 不需要被缓存
    }
  }
]

然后到组件

<keep-alive>
    <router-view v-if="$route.meta.keepAlive">
        <!-- 这里加载会被缓存的视图组件，比如 Refund！ -->
    </router-view>
</keep-alive>

<router-view v-if="!$route.meta.keepAlive">
    <!-- 这里加载不被缓存的视图组件，比如 MyOrder！ -->
</router-view>