1、遇到的问题
当我们使用 Vue 去实现一个比较大型的SPA单页面的应用时候，通常使用到了vue-router，此时会出现一种场景：左侧是菜单、右侧是页面内容，点击不同的菜单时有时候需要对页面的内容进行以下三种操作
1. 保留状态（例如新增页面 需要保持状态） 2. 刷新页面（列表页面） 3. 根据情况进行 保留 或者 刷新（两种情况动态判断）
对以上问题进行探讨，需要用到 vue-router 中的<keep-alive>标签 和路由跳转携带参数去解决问题。
2、解决
2.1 对路由动态的添加<keep-alive>
保留状态只需要用到<keep-alive>去包裹<router-view>，不需要保留的则不适用包裹，我们要如何动态的添加这个标签？
只需要在路由router.js 定义的时候 在meta 对象中添加额外参数keepAlive去控制
// router.js中的路由对象{path: "/mine",name: "Mine",meta: {keepAlive: true, //添加这个作为标志符，表明该页面需要保留状态},component: () => import("@/views/clue/pool"),},
在VUE中我们的SPA通过<router-view>去布局并实现路由，这样就可以实现页面的局部刷新（避免的整个页面的刷新导致的性能问题、空白问题），此时我们可以使用上面的额外参数
<!-- 主体视图层 --><div id="layout"><div class="layout-head">这里是头部</div><keep-alive><router-view class="layout-body" v-if="$route.meta.keepAlive"/></keep-alive><router-view class="layout-body" v-if="!$route.meta.keepAlive"/><div class="layout-footer">这里是尾巴</div></div>
可以看到使用$route.meta.keepAlive就能实现动态的决定是否保留页面状态
关于keep-alive的实现可以看这里➡️ ： keep-alive 实现原理
2.2 当使用keep-alive同时也需要对页面跳转后进行局部强制刷新
当一个页面状态过于复杂，需要一直保留状态，但是其他页面进行了某些操作跳转到这个页面时候，我们有时候需要强制刷新该页面（这里刷新指局部的刷新，在VUE中通常是重新的渲染）
采用路由路由跳转携带额外参数去动态的判断，使用this.$router.push中的params可以实现不在路由中显示该参数
// 使用 name + params 的跳转方式即可隐藏路由参数this.$router.push({name: 'Mine', params:{refresh: true}})
// 对跳转目标的路由进行监听，路由监听可以在 vue 的 watch 中实现watch: {$route () {if(this.$route.params.refresh){this.getList() //重新调用http请求实现页面的重新渲染}}},
