vue解决刷新页面vuex数据、params参数消失的问题（params传递多个参数）

2023-10-27 16:17| 来源: 网络整理| 查看: 265

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

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，只是切换个单词而已，这是一种方法（不是最优办法）。

2019-6-28补充：如果想传入多个参数写法如下：

path: '/adminCun/:jum/:id/:type

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

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

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

二、还有一种就是使用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存值、传值的时候刷新页面数据消失的解决办法。

【本文地址】

公司简介

联系我们