vue路由如何传参
-
路由传参有两种方式:
query和 params
-
分别简述一下这两种的区别
-
query方式: 必须定义path属性,【这个path在浏览器地址栏中是可见的】,通过this.$route.query.参数来接收参数,
-
query有什么好处呢?
当你刷新页面时,数据是不会丢失的; -
query传的参数都将会转成字符串
: 比如:
this.$router.push({path:'/路由',query:{ id:[1,2,3] } })
在接收参数页面打印出来则是
id:["1","2","2"]--------->字符串类型
methods:{
//比如列表页面进入详情的时候要传参数id
//在methods定义一个方法
goDetail(id){
//我们可以通过两种写法
this.$router.push('/路由?id'+id)
this.$router.push({path:'/路由',query:{ id:id } })
}
}
- 在详情页面里面 首先我们要接收传来的参数 接收的时候我们可以在mounted中或者created里面接收
this.$route.query.id
-
**params方式:**必须定义name属性,通过params传参,通过this.$route.params.参数来接收参数,
-
params有什么缺点呢?
当你刷新页面时,数据会丢失; -
params传参的话,参数可以是数组,也可以是对象,传输的大小是不受限制的
-
比如:
this.$router.push({path:'/路由',query:{ id:[1,2,3] } })
在接收参数的页面接收 传参前传参后的数据类型是不变的
id:[1,2,3]------->传的是数组,则打印出来仍是数组
- 同时 传参我么也可以使用 router-link 标签 通过里面的 to 属性
- 如图:
回顾温习
- js是最先接触的
- js中获取dom元素有三种方式
⼀是html事件处理程序 在标签中直接 οnclick=“方法名”
⼆是DOM0级事件处理程序 =》pc端用的多且兼容性好,先获取 Var 变量=
dom(documment.getElemmentBy…)
缺点:只支持冒泡不支持捕获 变量.onclick=function(){}
三是DOM2级事件处理程序(三个参数)
var btn=document.getElementById(‘id元素’) //绑定事件
btn.addEventListener(‘click’,绑定的事件处理函数名,false) //移除事件 btn.removeEventListener(‘click’,要移除的事件处理函数名,false)
```javascript
优点:⽀持给个元素绑定多个相同事件,⽀持冒泡和捕获事件机制
那么在vue中该如何获取dom元素呢
很简单 通过this.$refs.属性来获取