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

布满荆棘的人生 2023-10-02 14:35 41阅读 0赞

**目录**

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