Vue 跳转路由传参以及获取参数

Vue 跳转路由传参以及获取参数

跳转路由传参

跳转前的页面编辑：（即传参页面）
在template中跳转路由传递参数（query）

<router-link :to="{path:'/positionList',query:{province:1,city:1}}" class="beijing">
	<span>北 京</span>
</router-link>
<router-link :to="{name:'positionList',params:{province:2,city:2}}" class="shanghai">
	<span>上 海</span>
</router-link>

在JavaScript中跳转路由传参

 this.$router.push({ name: 'positionList', params: { province:1,city:1} });
 this.$router.push({ path: '/positionList', query: { province:1,city:1} });

跳转路由获取参数

跳转后的页面编辑：（即获取参数页面）
在JavaScript中获取参数

let data = this.$route.query
console.log(data)
let data2 = this.$route.params
console.log(data2)

params传参与jquery传参的区别

params只能用name引入路由，刷新页面时参数会消失
query可以用path引入路由，也可以用name引入路由，刷新页面参数不会消失