先看下传参代码:
this.$router.push({ name: 'admin/', query:{ accountInfo:data.data, } })获取参数,初次载入
console.log(this.$route.query); //{accountInfo: {…}} 正常显示刷新页面
console.log(this.$route.query); //{accountInfo: "[object Object]"} 获取不到内部数据传递的参数 如果是普通格式没问题,如果是对象,刷新后不管是params 还是 query 都会消失。
问题解决方案:
1. 使用JSON转译
JSON.stringify() 把对象变成字符串,然后再传递,没有问题。
let accountInfoJson = data.data; accountInfoJson = JSON.stringify(accountInfoJson); if (data.code === 200) { this.$router.push({ name: 'admin/', query:{ accountInfo:accountInfoJson, } }) }获取参数
let accountInfo = JSON.parse(this.$route.query.accountInfo); console.log(accountInfo);//可以成功获取参数缺点:
再次进行路由跳转时,需要再次传递该参数,否则会无法获取
2.使用HTML5的web存储
HTML5 提供了两种在客户端存储数据的新方法:
localStorage - 没有时间限制的数据存储
sessionStorage - 针对一个 session 的数据存储
数据储存
request({ url: '/a/login', method: 'post', data: dataJson, type: 'json', contentType: 'application/json', }).then((data) => { let accountInfoJson = data.data; accountInfoJson = JSON.stringify(accountInfoJson); sessionStorage.setItem("accountInfo",accountInfoJson); if (data.code === 200) { this.$router.push({ name: 'admin/', }) } });取出数据
let accountInfoJson = sessionStorage.getItem("accountInfo"); let accountInfo = JSON.parse(accountInfoJson); console.log(accountInfo);//注意JSON转译缺点
如果存储用户的身份信息,注意退出登录时清除数据
3. 在vue中设置全局变量
global.vue 以一个特定模块来组织管理这些全局量,需要引用的地方导入该模块
let accountInfo = {}; export default{ accountInfo }存储变量
import global from './global';//引入全局变量 request({ url: '/a/login', method: 'post', data: dataJson, type: 'json', contentType: 'application/json', }).then((data) => { global.accountInfo = data.data; //把数据存储在全局变量 if (data.code === 200) { this.$router.push({ name: 'admin/', }) } });取出变量
import global from './global';//引入全局变量缺点:
页面刷新,该参数会无法获取