Vue Router两种传参pramas和query的区别使用

params传参

params传参改变底层栏（url地址）里的path路径

地址栏：http://localhost:3000/home/1

　　

<router-link :to="/home/1">parans传参</router-link>

{
path："/home/:id"，//找到当前路径规则定然后义个占位符（随便定义变量）：例如id
component：Home
}

//接收参数：this.$route.params.id

mounted(){

console.log(this.$route.params.id)

}

query传参

query改的是浏览器地址栏seach对象

地址栏：http://localhost:3000/home?id=1

　　

<router-link :to="{path:'/home',query:{id:1}}>query传参</router-link>

<router-link :to="{name:'home',query:{id:1}}">query参数</router-link>

{

path："/home"，

name:"home"，//这里为name对应上边name

component：Home

}

接收参数： this.$route.query.id
mouted：{

console.log(this.$route.query.id)

}

 

转载于:https://www.cnblogs.com/guqzhoublog/p/11237814.html