vue-router中参数传递

VUE路由之间携带参数

今天在实现一个功能的时候遇到的问题，一个把组件a中的值传输到组件b中时，但是组件a和组件b之间通信的时候路由跳转了

猜想：路由跳转导致监听事件失败，（暂时理解为：当路由跳转后监听不到这个事件，因为是路由跳转了）

解决方法：通过路由携带参数代替组件通信

 

方法一：通过query携带参数

//login组件
this.$router.push({path:'/user',query:{userid:'001'})

//user组件
this.$route.query.userid ->'001'

缺点：传递的参数会通过在地址栏中显示

　　

 

 

 

方法一：通过params携带参数

//login组件
//login组件
this.$router.push({name:'user',params:{userid:'001'})

//user组件
this.$route.params.userid ->'001'

注：如果通过params传递参数需要使用路由的naem属性进行跳转

 

 

 

 

除此之还有的就是在路由中写的是

//login组件
//router.js
const router = new VueRouter({
　　 routers:[
　　　　 {path:'/login',name:'Login',componentor:'Login'},
　　　　 {path:''/user/:userid',name:'User',componentor:'User'}
　　 ]
})
//login
this.$router.push({path:'/user/001'})　
//user
this.route.params.userid -> 001


浏览器的地址栏中是： xxxxxx/user/001　　　　　

 

 

 

 

来源：https://www.cnblogs.com/geter/p/12312233.html