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