vue项目开发中页面之间传递参数的方法

1.编程式导航（router.push）

使用方法：this.$router.push()
如果里边放的是字符串，直接跳到对应的路径
eg:this.$router.push("/Login")会直接跳到Login页面，这时候并不传递参数

1.1.命名路由（params）

使用方法：

//这里通过传一个对象，把路径和参数传到要跳转的页面
this.$router.push({
name:"Login",
params:{
	name:'gjl'
}
})

注意，看这种传参的名字我们都可以知道，这里用name来跳转路径，所以配置路由的时候一定要，对路由进行命名
再别的组件中使用传递过来的参数方法：this.$route.params.name

2024年3月14日修改：这种传参方式应该是已经废弃了！！
1.今天遇到一个警告bug：

2.导航到当前页面看到相关的解释

3.解释链接：https://github.com/vuejs/router/blob/main/packages/router/CHANGELOG.md#414-2022-08-22
防止误导后来人，所以解释一下！！！

1.2.查询路由（query）

使用方法：

this.$router.push({
path:"/Login",
//这里传的是一个对象
query:{
	name:'gjl',
	age:20,
	height:1.77
}
})

注意：这里路径一定要写成path，另外query可以是我们组件data中定义好的数据
再别的组件中使用传递过来参数的方法：this.$route.query.name(age/height)

2.声明式导航(router-link)

2.1.命名路由（params）

这种方法是通过动态路由传参实现的
使用方法：
1.配置动态路由，在路由的index.js文件中这样配置路由

{
	path:"/Login/:id",//在正常路由后边加上需要传递的参数值
	name:"Login",
	component:Login
}

2.在需要传递参数的页面这样写：<router-link :to="{path:"'/Login/'+id"}"
这里的id我们先在data里边定义好，必须和1中配置的相对应
3.在接受参数的页面使用this.$route.params.id 获取传递过来的值
格式：直接在路由后边拼接，…/Login/id

2.2.查询路由（query）

使用方法：
1.直接正常的在index.js文件中配置路由
2.在需要传参的页面里使用<router-link :to=“{path:'/Login',query:{ name:'lh', age:12,height:1.88}}”
3.在接受参数的页面使用this.$route.query.name
路由格式：…/Login?name=lh&age=12&height=1.88

**通过练习观察发现**
编程式的命名路由传参是不会在url上暴露参数值的，就是我上边写的1.1

3.总线传值（bus）

bus属于vue中的总线机制，我们也可以使用它来进行传值，它进行兄弟之间的传值就很方便，当然非父子组件之间的通信使用vuex也会更方便
bus的使用只需要三步
1.在main.js中new一个Vue对象，并挂载到Vue原型上边，既$bus Vue.prototype.$bus=new Vue()
2.在需要传值的组件中使用 this.$bus.$emit()方法发送需要传的值，第一个参数是一个唯一标识，第二个参数是要传的数据（不限类型） this.$bus.$emit('statusTableId',id)
3.在需要接收数据的组件中，在钩子函数中（mounted/created..）中编写接受方法，即使用this.$bus.$on()方法，第一个参数是唯一标识（key）需要和第二步中的唯一标识一致，第二个参数是一个回调函数，res是传过来的值
使用bus进行父子组件传值的时候，可以把第2,3步的方法编写在mounted和created里边，第三步使用{{}}对传过来的数据进行展示 的时候没有什么问题
当我使用bus进行兄弟组件传值的时候，并没有那么顺利的在第3步展示出来传过来的值 ，这是一个坑！！！
和组件的生命周期有关，我这里直说使用方法：

//在需要传值的组件中，把代码编写在这样一个钩子函数里
beforeDestroy(){
   //console.log('a destory');
   this.$bus.$emit('o',this.id)
 }
 //这个时候，你就可以在接受值的组建中在created/mounted里边
 //编写代码了，当然使用{{}}也能正常展示了

4.写在最后

个人学习总结，欢迎指正！