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