vue-router中params和query的细节

最新推荐文章于 2026-05-05 06:08:38 发布

原创最新推荐文章于 2026-05-05 06:08:38 发布 · 2k 阅读

1 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

vue 专栏收录该内容

32 篇文章

订阅专栏

本文详细探讨了Vue Router中params和query的区别与用法。当params和query同时使用时，params会被忽略。params和query可以结合使用，传递参数时系统会对参数进行编码。在组件内部，可以通过this.$route来访问params和query中的参数，这些参数会被自动解码。

`path` 和`params` 同时使用，会忽略 `params`

this.$router.push({path:'/book', params:{id:'123213'}}) 
// 这实际上与下面相同
this.$router.push({path:'/book'})
// 实际访问路径为 /book

`path`和`query`可以同时使用

this.$router.push({path:'/book',query:{a:1}})
// 实际访问的页面路径为 /book?a=1

通过`params`或`query`传参，会默认对参数进行编码`encodeURIComponent`

this.$router.push({name:'PathUrl',params:{url:'http://www.baidu.com'}}) 
// 上面路由，实际访问地址为 /pathurl/http%3A%2F%2Fwww.baidu.com
this.$router.push({name:'PathUrl',query:{url:'http://www.baidu.com'}})
// 上面路由，实际访问地址为 /pathurl?url=http%3A%2F%2Fwww.baidu.com

在`this.$route`里访问`params`和`query`里的参数，会进行一次`decodeURIComponent`

// 当前路径为:
// /pathurl/http%3A%2F%2Fwww.baidu.com
// query /pathurl?url=http%3A%2F%2Fwww.baidu.com
this.$route.params.url // http://www.baidu.com
this.$route.query.url  // http://www.baidu.com