在vue中官网中我们可以看到两种页面间传值的方法：query和params

query 跳转URL携带参数

首先在路由文件中定义类似的如下路由

{
      path:"/user",
      name:"user",
      component:user
    }

然后在页面中定义跳转路径和传值参数

this.$router.push({path:'/user',query:{userName:'ls',userId:'02'}});

浏览器会显示

http://localhost:8080/#/user?userName=ls&userId=02

我们已经了解了query传参会将参数都放到url中，所以当传递的值比较多的情况下，跳转的url会太长而受限制（取决于浏览器和服务器的限制）

所以只建议在参数较少的情况下使用query传值

params

参数不带入url中，可在参数较多时使用

同样的先在路由文件中定义类似的如下路由

{
      path:"/user",
      name:"user",
      component:user
    }

然后在页面中定义跳转路径和传值参数

this.$router.push({path:'/user',query:{userName:'ls',userId:'02'}});

问题来了，如果我们打印下面代码，结果肯定是 undefined

console.log(this.$route.params.userName )

注意，这是因为使用params传值，只能用name来引入路由，可见官网

正确的写法

this.$router.push({name:'user',query:{userName:'ls',userId:'02'}});

问题又来了，如果我们刷新页面，参数就不见了

注意，用params携带参数时，在注册路由时，需要在path后面加上/:参数名

{
      path:"/user/:userName/:userId",
      name:"user",
      component:user
    }

浏览器会显示

http://localhost:8080/#/user/ls/02

这样做虽然解决了上面的问题，但是同样会在url后面显示传入的参数值

sessionStorage 会话存储

优点：不仅可以解决传参较多问题，还可以传递一个完整的对象；对于临时数据，避免了参数值过期时间的设置

sessionStorage 是HTML5新增的一个会话存储对象，用于临时保存同一窗口(或标签页)的数据，在关闭窗口或标签页之后将会删除这些数据

存储数据

采用setItem()方法存储

sessionStorage.setItem('userName','ls');

通过属性方式存储
　　
sessionStorage['userName'] = 'ls';

读取数据

通过getItem()方法取值

sessionStorage.getItem('userName')

通过属性方式取值

sessionStorage['userName']

存取对象

存储时，通过JSON.stringify()将对象转换为文本格式

读取时，通过JSON.parse()将文本转换回对象

let userInf = {
    userName: 'ls',
    userId: 02
}

// 存储值：将对象转换为Json字符串
sessionStorage.setItem('user', JSON.stringify(userInf))

// 取值时：把获取到的Json字符串转换回对象
var userJsonStr = sessionStorage.getItem('user')

userInf = JSON.parse(userJsonStr);
console.log(userEntity.userName); // => ls

页面间的传值方法及问题