vue中params传参后 vuex数据 刷新页面参数消失的解决办法

平常我们在vue页面中传参最常用的就是params和query两种方法

1.params传参的使用

 Onchange: function (e) {
      console.log(e.title);
      this.$router.push({
        name:'ordernoted', //使用params传参这里就要用name来写路径
        params:{
          id:e.username
        }
      })
    },

跳转到达的页面 用一下方法接收参数

//在create初始化中接收参数
 created() {
    var items =this.$route.params.id
    console.log(items)
  }

这时候当点击到的那个页面，参数是可以显示出来的

但是当我们再次在当前页点击刷新时，数据就会丢失，显示未定义，如下：

这个时候我们可以这样解决：
在跳转到达的页面路由上这样写：

  {
      path: "/ordernoted/:id",//添加上要传递的参数
      name: "ordernoted",
      component: () => import("./views/ICK/Listpage/Ordernoted"),
      meta: {
        keepAlive: true
      }
    },

然后传参还是跟上面一样的方法传：

 Onchange: function (e) {
      console.log(e.title);
      this.$router.push({
        name:'ordernoted',
        params:{
          id:e.username
        }
      })
    },

在下个页面接收：

    var items =this.$route.params.id
    console.log(items)

这样的话我们无论刷新多少次页面传过来的数据都不会丢失

如果我们要传多个参数的话可以这样写:

  path: "/ordernoted/:jum/:id",//可以一直在后边拼接参数

 this.$router.push({
        name:'ordernoted',
        params:{
          jum:e.title,
          id:e.username
        }
      })
   //直接这样写就可以的

2.传参方式用query方法也是可以的

 this.$router.push({
        path:'/ordernoted',//用qyery是就要用path写跳转的路由了
        query:{
          id:e.username
        }
      })

接收参数

  var items =this.$route.query.id //这里我们用query传参的话，接收也要用query来接收
  console.log('传过来的参数:'+items)

3.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刷新数据消失的问题了。