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请求实现页面的重新渲染
	      }
	    }
	  },