脚本宝典收集整理的这篇文章主要介绍了vue中query路由传参刷新页面后数据丢失解决,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
目录
1.场景
2.问题分析
3.具体实例:
3.1 解决【object object】问题
3.2 解决刷新数组为空值,做持久化
4.相关知识
4.1 localStorage本地存储的方法,可以持久化存储,特点是不删除就会一直在
4.2 nuxt-link(或者vue路由里)中传递参数
使用route-link to: 或者$route.push() 进行页面跳转传参数,我这里需要传递一个对象用于渲染二级路由的tab栏。
路由中的query传参,页面刷新后应该是还在的,但是如果传递的是数组或对象,那么他就会变成:【object object 】这是因为他给转成字符串了,解决方式也很简单,在你要传参的地方用JSON.stringify(),接收数据的地方用JSON.parse(),就可以解决这个问题。
然而,我这个刷新后变成了空,于是我想到了本地存储做持久化。最后也成功了。
有两个点要注意下:用本地存储也要做判断,再就是记得在销毁钩子里面干掉它。
//传递时存 主页面1
<nuxt-link :to="{path:`bzzx/dd`,query:{helps:JSON.stringify(item.HelpLs) ,name:item.TypeName}}">
<div class="titleDiv">
{{ item.TypeName }}
<i style="color: #c90000" class="el-icon-arrow-right"></i>
</div>
<p v-for="(it, idx) in item.HelpLs" :key="idx">{{ it.Title }}</p>
</nuxt-link>
//子页面2
async asyncData ({ params, app,query }) {
const data = await app.$api.CMSApi.GetHelpPage()
if(!query.helps) return
let copy = JSON.parse(query.helps) //这里取值
let lists = copy
// let lists = JSON.parse(query.helps)
let Tname = query.name
return { detail: data ,lists,Tname}
},
mounted () {
// /* 存储*/ 解决一刷新左侧tab消失的问题
if(!localStorage.getItem('lists')){
localStorage.setItem('lists', JSON.stringify(this.lists));
}else{
this.lists = JSON.parse(localStorage.getItem('lists'))
}
// /* 存储*/ 解决一刷新左侧tab消失的问题--左侧的大标题
if(!localStorage.getItem('Tname')){
localStorage.setItem('Tname', JSON.stringify(this.Tname));
}else{
this.Tname = JSON.parse(localStorage.getItem('Tname'))
}
},
destroyed(){
// 清除本地中存储的左侧tab栏
/* 移除存储信息 */
localStorage.removeItem('Tname');
localStorage.removeItem('lists');
},
let saveUserInfo={
'username':'admin',
'roleId'::'1',
'userId':'b341181c-aced-11e9-89bf-00163e0e8daf',
};
/* 存储*/
localStorage.setItem('saveUserInfo', JSON.stringify(saveUserInfo));
/* 获取存储信息 */
console.log( JSON.parse(localStorage.getItem('saveUserInfo')) )
/* 移除存储信息 */
localStorage.removeItem('saveUserInfo');
/* 移除所有*/
localStorage.clear();
传参方式1:<nuxt-link :to="{path:'/about',query:{index:id}}" target="_blank" ><nuxt-link>
地址栏显示:loaclhost:3000/about/id
接收地址栏参数:this.$route.query.index
传参方式2:` <nuxt-link target="_blank" :to="{name: 'log-id', params:{id: n.id,key:value}}"></nuxt-link>`
地址栏显示:`loaclhost:3000/about/id`
接收:async asyncData ({ params }) { // params.id 就是我们传进来的值}// 或者 created () { this.$route.params.xxx}`
方式3:方法中使用
getDescribe(id) {
// 直接调用$router.push 实现携带参数的跳转
this.$router.push({
path: `/describe/${id}`,
})
方式4:方法中使用
this.$router.push({
path: '/describe',
query: {
id: id
}
})
接收时:
$route.query.id //or params
以上是脚本宝典为你收集整理的vue中query路由传参刷新页面后数据丢失解决全部内容,希望文章能够帮你解决vue中query路由传参刷新页面后数据丢失解决所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。