Open lulujianglab opened 6 years ago
在vue中官网中我们可以看到两种页面间传值的方法:query和params
首先在路由文件中定义类似的如下路由
{ 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传值
参数不带入url中,可在参数较多时使用
同样的先在路由文件中定义类似的如下路由
console.log(this.$route.params.userName )
正确的写法
this.$router.push({name:'user',query:{userName:'ls',userId:'02'}});
{ path:"/user/:userName/:userId", name:"user", component:user }
http://localhost:8080/#/user/ls/02
这样做虽然解决了上面的问题,但是同样会在url后面显示传入的参数值
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
在vue中官网中我们可以看到两种页面间传值的方法:query和params
query 跳转URL携带参数
首先在路由文件中定义类似的如下路由
然后在页面中定义跳转路径和传值参数
浏览器会显示
我们已经了解了query传参会将参数都放到url中,所以当传递的值比较多的情况下,跳转的url会太长而受限制(取决于浏览器和服务器的限制)
所以只建议在参数较少的情况下使用query传值
params
参数不带入url中,可在参数较多时使用
同样的先在路由文件中定义类似的如下路由
然后在页面中定义跳转路径和传值参数
问题来了,如果我们打印下面代码,结果肯定是 undefined
注意,这是因为使用params传值,只能用name来引入路由,可见官网
正确的写法
问题又来了,如果我们刷新页面,参数就不见了
注意,用params携带参数时,在注册路由时,需要在path后面加上/:参数名
浏览器会显示
这样做虽然解决了上面的问题,但是同样会在url后面显示传入的参数值
sessionStorage 会话存储
优点:不仅可以解决传参较多问题,还可以传递一个完整的对象;对于临时数据,避免了参数值过期时间的设置
sessionStorage 是HTML5新增的一个会话存储对象,用于临时保存同一窗口(或标签页)的数据,在关闭窗口或标签页之后将会删除这些数据
存储数据
采用setItem()方法存储
通过属性方式存储 sessionStorage['userName'] = 'ls';
读取数据
通过getItem()方法取值
通过属性方式取值
sessionStorage['userName']
存取对象
存储时,通过JSON.stringify()将对象转换为文本格式
读取时,通过JSON.parse()将文本转换回对象
对于永久存储的数据,本地存储传值可以用localStorage,方法与sessionStorage类似