vue-router路由参数（params和query）

⼀、params和query

params⽅法传参的时候，要在路由后⾯加参数名占位；并且传参的时候，参数名要跟路由后⾯设置的参数名对应。

/user/:id这个路由匹配/user/111, /user/222这⾥的 id就是 params

query⽅法，就没有这种限制，直接在跳转⾥⾯⽤就可以。

/user?id="111"

/user?id="222"

这⾥的 id就是 query

⼆、query和params的⽤法

1、params:

1.1 路由配置：

// 使⽤params传参，路由配置的时候 path 要带上参数
{
   path: '/user/:id',
   name: "users",
   component: User    //这个 User 是组件名称
 }

1.2 跳转⽅式：

// ⽅法1：
<router-link :to="{ name: 'users', params: { id: this.id}}">按钮</router-link>
// ⽅法2：
this.$router.push({name:'users',params:{id: this.id}})
// ⽅法3：
this.$router.push('/user/' + this.id)

1.3  页⾯url显⽰：

params在浏览器地址栏中不显⽰参数名

1.4 获取参数⽅式:

this.$route.params.id

2、query:

2.1 路由配置

//使⽤ query 传参这⾥不需要参⼊参数，参见上⾯的params写法
{
   path: '/user',    
   name: "users",
   component: User    //这个 users 是传进来的组件名称
 }

2.2  跳转⽅式：

// ⽅法1：
<router-link :to="{ name: 'users', query: { id: this.id }}">按钮</router-link>
// ⽅法2：
this.$router.push({ name: 'users', query:{ id: this.id }})
// ⽅法3：
<router-link :to="{ path: '/user', query: { id: this.id }}">按钮</router-link>
// ⽅法4：
this.$router.push({ path: '/user', query:{ id: this.id }})
// ⽅法5：
this.$router.push('/user?id=' +  this.id)

2.3  页⾯url显⽰：

query在浏览器地址栏中显⽰参数名称

2.4 获取参数⽅式:

this.$route.query.id