vue解决刷新页面vuex数据、params参数消失的问题

一般项目都会有一些逻辑需要传递值给另一个页面，那么有的时候就会出现一个问题：用户刷新了页面，诶？数据没了，参数错误。那么今天经过总结，解决了这个问题。我在最新的项目中，通过了一下几种情况进行传值：

1、通过路由传值，params或query

2、通过vuex进行状态管理 $store.state...

3、使用localStorage进行传值

那么，关于刷新页面数据消失原因有两种，一是通过路由params传值，二是vuex传值

一、通过路由params传值

路由传值有两种方式，params和query，params传值刷新页面是要消失的，然而query却不会，两者的区别就在于query会把传递的参数显示在url地址中，就像这样：/adminUser/001001001?jum=001001001211，参数过多的话url地址会变得非常难看，如果你并不在意url地址难看与否，那么你可以不使用params，而是使用query，只是切换个单词而已，这是一种方法（不是最优办法）。

还有一种方法，就是在定义路由的时候，给path设定参数，举个例子，一看就懂

export default [{
  path: '/platform',
  component: Layout2,
  children: [{
    path: '/adminCun/:jum',        //这里值用:加参数的写法，jum即为参数，注意一定要用/隔开
    name:'platformRecycleAdminCun',
    meta:{
      title:'管辖村级详情'
    },
    component: resolve => require(['@/view/platform/recycle/admincun'],resolve)
  }]
}]

<template slot-scope="props">
  <el-button type="text" @click="$router.push({name:'platformRecycleAdminCun',params:{jum:props.row.jgNum}})">
    {{ props.row.jgName }}
  </el-button>
</template>

这样就可以随心所欲的刷新了。

二、还有一种就是使用vuex

页面刷新store.state中的数据消失是不可避免的，那么使用localStorage来避免这个问题。发现问题的时候我就考虑到存数据在localStorage里，但是一个一个数据添加实在是太蠢了。那么就需要一个全局的方法来，将store的数据存储在localStorage里。具体的方法也是百度的很好用，也很方便。

在App.vue中，created初始化生命周期中写入以下方法


//在页面刷新时将vuex里的信息保存到localStorage里
window.addEventListener("beforeunload",()=>{
  localStorage.setItem("messageStore",JSON.stringify(this.$store.state))
})

//在页面加载时读取localStorage里的状态信息
localStorage.getItem("messageStore") && this.$store.replaceState(Object.assign(this.$store.state,JSON.parse(localStorage.getItem("messageStore"))));

replaceState这个方法呢，查了api，就是替换 store 的根状态，然后通过对象赋值assign将localStorage进行赋值

beforeunload这个方法是在页面刷新时触发的，将store中的信息存入localStorage

这样就通过localStorage来避免vuex刷新数据消失的问题了。

以上是路由传参和vuex存值、传值的时候刷新页面数据消失的解决办法。

vue解决刷新页面vuex数据、params参数消失的问题

猜你喜欢