前言:在第七天的时候我们学习了路由跳转,但是在很多路由跳转不可能只是跳转这么简单,往往跳转的时候还会携带参数过,所以今天在路由跳转的基础上学习传递参数。
一.写好路由跳转
今天我写了两种跳转携带参数的方式分别绑定了事件toindex1与toindex2
下面来看看toindex1与toindex2分别写了什么
toindex1:function(){
this.$router.push({
name:"index",
path:"/index",
query:{id:12}
})
},
//options为形参,而在data里面定义的为实参
toindex2:function(options){
this.$router.push({
name:"index",
path:"/index",
query:{
id:options,
}
})
}
由此可见toindex1的传参是固定的12 ,而toindex2的传参是键盘上输入的值通过双向绑定值到num1上再以形参的方式通过query传给跳转的页面。
此时参数已经传到了index页面,我们就可以在index页面里面去接受参数
再显示到页面上
二.query与params的区别
首先query与params都是作用与传参但是他们之间却有着不同
1.query传过来的参数会显示到地址栏中 而params传过来的参数不会显示到地址栏中 直白的来说 query相当于get请求,而params相当于post请求
2.两者中query在刷新页面的时候参数不会消失 但params在刷新页面的时候参数会消失 可以考虑本地存储解决此问题(但是在公司工作的时候很多大佬都在使用query
多一点)