vue中params和query的区别及路由传参的三种基本方式

待写
待写

query

query通过 router-link或者this.$router.push跳转页面传参数

第一种方式 router-link

name和path都可以用,to的取值可以是对象的方式也可以是字符串的方式

<router-link :to="{ name: 'W', query: { id:'1234'，age:'12' }}"/>
<router-link :to="{ path: '/W/s', query: { id:'1234',age:'12' }}"/>
<router-link to="'/W/s/?id=1234&age=12'">用户</router-link>

第二种方式 this.$router.push

this.$router.push({path:'/W/s', query: {id:'1234', age: 12}})
this.$router.push({path:'/W/s?id=1234&age=12'})

对应的router编写

name和path都可以来匹配对应的跳转组件

{
	path: '/W/s', 
	name: 'W', 
	component: W
}

形成的页面路径

http://localhost:8080/#/W/s?id=1234&age=12

query接受传递的参数取值

this.$route.query.id
this.$route.query.age

params

query通过 router-link或者this.$router.push跳转页面传参数

第一种方式 router-link

注意：使用router-link不能用path只能用name或者to字符串拼接,不然会直接无视掉params中的内容

<router-link :to="{ name: 'W', params: { id:'1234'，age:'12' }}"/>
<router-link to="/W/s/1234/12"/>

第二种方式 this.$router.push

这种方式说是页面刷新数据，数据会丢失（待验证）
this.$router.push({name:'W',params: {id: 1234,age:'12'}})
this.$router.push({path:'/W/s/1234/12'})

对应的router编写

name和path都可以来匹配对应的跳转组件

{
	path: '/W/s/:id/:age', 
	name: 'W', 
	component: W
}

形成的页面路径

http://localhost:8080/#/W/s/1234/12

query接受传递的参数取值

this.$route.params.id
this.$route.params.age

params和query的区别

虽然query使用path或者name引入都可以，但是params只能使用name来引入，接受参数类似，分别是this.$route.query.id和this.$route.params.id
query拼接的路径，类似是get请求