Vue 页面状态保持页面间数据传输的一种方法(推荐)

如果大家觉得有用，更多的模块请 点击查看

vue router给我们提供了两种页面间传递参数的方式:

• 动态路由匹配
• 编程式的导航
  

// 命名的路由
router.push({ name: 'user', params: { userId: 123 }})

// 带查询参数，变成 /register?plan=private
router.push({ path: 'register', query: { plan: 'private' }})

下面介绍一下 vue-viewplus 一个简化Vue应用开发的工具库 中的参数栈模块params-stack.js：

该插件为Vue实例提供了一个 $vp 属性，模块提供了一系列api，来做自己的页面参数方式：

// 跳转页面，并传递参数
this.$vp.psPageNext('/Demo/PageStack/Page2', {
 params: {
  phoneNumb: '15111111111'
 }
})

这一点和vue router给我们提供的传递方式类似，并且目前还不支持 query: { plan: 'private' } 传递url参数，但是我们为什么还要做这个模块：

• 提供一个 栈 来管理栈内所有页面的参数，方便页面在回退的时候，拿到对应页面的 缓存参数 ；即一般我们使用vue router的时候每个页面的参数（除了使用url参数），在做统一返回键处理的时候，都不太方便进行页面状态恢复，而如果我们提供了一个栈，在页面入栈的时候，将当前页面的参数存储，在下一个页面点击返回按钮回到当前页面的时候我们再从参数栈恢复参数，这样就能实现客户端开发中具有的这一特性；
• 该参数栈也支持缓存->自动恢复，vuex state和session storage两级存储保证参数栈不会被页面刷新而导致页面参数丢失
• 也为了统一编程方式
  

并且，当前模块提供的参数传递方式，和vue router给我们提供了两种页面间传递参数的方式， 并不冲突 ，可以互补使用。

只不过目前插件的参数栈并没有管理vue router帮我们传递的参数；

vuex state 参数栈存储示例：

session storage 参数栈二级存储示例：

示例

模拟一个简单表单提交流程

图 详见源码 example 项目中当前模块示例

表单录入页面(简称：Page1)

表单确认页面(简称：Page2)




表单结果页面(简称：Page4)

paramsStack mixin

以上3个页面都集成了 paramsStack mixin ，定义如下：

export const paramsStackMixin = {
 data() {
  return {
   
   isStackBottom: false
  }
 },
 computed: {
  ...mapGetters([
   
   'params'
  ]),
  
  backParams() {
   return this.$store.state[MODULE_NAME].backParams
  },
  
  backState() {
   return this.$store.state[MODULE_NAME].backState
  }
 },
 methods: {
  ...mapMutations([
   
   'pushParams',
   
   'modifyParams',
   
   'popParams',
   
   'clearParamsStack',
   
   'setBackState'
  ])
 },
 // 导航离开该组件的对应路由时调用
 beforeRouteLeave(to, from, next) {
  if (this.backState && this.isStackBottom) {
   this.clearParamsStack()
  }
  next()
 }
}

配置

没有个性化配置，可以查看全局通用配置

API接口

restoreParamsStack

 restoreParamsStack()

psModifyBackState

 psModifyBackState(bckState)

psClearParamsStack

 psClearParamsStack()

psPageNext

 psPageNext(location, {params = {}, clearParamsStack = false, backState = false} = {})

psPageReplace

 psPageReplace(location, {params = {}, isPop = true} = {})

psPageGoBack

 psPageGoBack({backParams = {}, clearParamsStack = false, backPopPageNumbs = -1} = {})