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>
          <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}`
 

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

接收时：

1. $route.query.id //or  params