vue 路由传参

params

router-link 传参

• 在路径显示参数
• 刷新页面参数不丢失
• 配置路由：path:'/path/:id'
• 获取参数： this.$route.params.id
• 传递方式：

<router-link :to="`/path/${id}`"><router-link>

push+path

• 在路径显示参数
• 刷新页面参数不丢失
• 配置路由：path:'/path/:id'
• • 获取参数： this.$route.params.id
• 传递方式：

this.$router.push({
        path:'/zsf/222'
		//path不能和params一起使用
      })

push+name

• 在路径不显示参数
• 刷新页面参数丢失,是因为path没有配置id
• 配置路由：path:'/path', name:'zsf'
• 获取参数： this.$route.params.id
• 传递方式：

this.$router.push({
  name:'zsf',
   params:{
           id:222
         }
})

query

router-link

• 在路径显示参数：/path?id=123
• 刷新页面参数不丢失
• 配置路由：path:'/path'
• 获取参数： this.$route.query.id
• 传递方式

<router-link :to="{path:'/path',query:{id:'123'}}"><router-link>
//或者
<router-link :to="/path?id=123"><router-link>

push+path

• 在路径显示参数: /path?id=222
• 刷新页面参数不丢失
• 配置路由：path:'/path'
• • 获取参数： this.$route.params.id
• 传递方式：

this.$router.push({
  // path:'/zsf?id=222'
        path:'/zsf',
        query:{
          id:222
        }
})

push+name

• 在路径显示参数：/path?id=222
• 刷新页面参数不丢失
• 配置路由：path:'/path', name:'zsf'
• 获取参数： this.$route.params.id
• 传递方式：

this.$router.push({
  name:'zsf',
   query:{
           id:222
         }
})

---

---

---

---

---

对象中的name+params

this.$router.push({ name: 'user', params: { id: this.id } })
路由路径不需要带：id
path:'/user'
取变量this.$route.params.id

对象中的name+query

this.$router.push({
name: 'user',
query: {
id: this.id
}
})
路由路径不需要带：id
path:'/user'
取变量this.$route.query.id

对象中的path+query

this.$router.push({
path: '/user',
query: {
id: this.id
}
})
路由路径不需要带：id
path:'/user'
取变量this.$route.query.id

字符串中不带？

this.$router.push(/user/${this.id})
路由路径需要带：id
path:'/user/:id'
取变量this.$route.params.id

字符串中带？

this.$router.push(/user?id=${this.id})
路由路径不需要带：id
path:'/user'
取变量this.$route.query.id