vue中query路由传参刷新页面后数据丢失解决

目录

1.场景

2.问题分析 

3.具体实例: 

3.1 解决【object object】问题

3.2 解决刷新数组为空值,做持久化 

4.相关知识

4.1 localStorage本地存储的方法,可以持久化存储,特点是不删除就会一直在

4.2  nuxt-link(或者vue路由里)中传递参数


1.场景

使用route-link to: 或者$route.push() 进行页面跳转传参数,我这里需要传递一个对象用于渲染二级路由的tab栏。


2.问题分析 

路由中的query传参,页面刷新后应该是还在的,但是如果传递的是数组或对象,那么他就会变成:【object object 】这是因为他给转成字符串了,解决方式也很简单,在你要传参的地方用JSON.stringify(),接收数据的地方用JSON.parse(),就可以解决这个问题。

然而,我这个刷新后变成了空,于是我想到了本地存储做持久化。最后也成功了。

有两个点要注意下:用本地存储也要做判断,再就是记得在销毁钩子里面干掉它。


 

3.具体实例: 


3.1 解决【object object】问题

//传递时存 主页面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}
  },

 

3.2 解决刷新数组为空值,做持久化 


 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');
  },

 


 

4.相关知识

4.1 localStorage本地存储的方法,可以持久化存储,特点是不删除就会一直在

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();
 
 

 

4.2  nuxt-link(或者vue路由里)中传递参数

传参方式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

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
THE END
分享
二维码
< <上一篇
下一篇>>