传统的的网站网页的开发，页面之间的参数是url地址栏上进行携带的（如：https://www.87ui.com?id=32323232&name=奇惠）这样的一个形式，这是传统的多页面的传参的方式。
但是用vue这种做出来的单页面网站，它们之间是组件之间的传参。前面的文章也讲过组件之间的参数传递，但讲的是父传子或子传父的方式，是在一个大组件里向嵌套在它内的小组件传参数。但是像多页面那样跳转页面（vue里：组件之间跳转）之间跳转传递参数是如何实现的呢？
今天就说说如何不用vue的自带的同组件之间传递数据方式，而用类似传统的多页面之间（url地址栏上带参数有点类似的方式）跳转的形式传递参数，看如下代码：
a.vue // a组件
<template>
<button @click="go('378232788282')">修改</button> // 举个很简单的修改例子
</template>
methods:{
go(id){this.$router.push({ name: 'user_editor', params: { userId: 123 }})}
}
b.vue // b组件
data(){
userdata:{} // 用户信息
}
mounted(){
if(this.$route.params){ // 做个判断，是否有参数
sessionStorage.userObj = JSON.stringify(this.$route.params) // 获取参数先保存
}
this.userdata = JSON.parse(sessionStorage.userObj)
}
这是一个很简单的获取到用户id，然后跳转到事先写用户编辑页面和路由（user_editor），params是router自带的一个可携带参数的一个方法，params是一个对象，所以可以携带多个参数，但它有个缺点就是页面刷新它就会丢失，传统的在地址栏上的参数刷新页面是不会丢失的，所以这里还得借助H5的sessionStorage存储方式。把params对象string（JSON.stringify()格式保存,JSON.parse()读取）后暂存在一个sessionStorage上，这样就解决了刷新数据丢失的缺点。
有喜欢vue的同学可以加我（微信：nihaomeili87）一起进步
网友评论