vue路由传参&如何获取dom元素

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.属性来获取