vue的动态路由匹配和路由组件传参（query传参）有什么区别？

Question

1. 动态路由匹配：

   const router = new VueRouter({
     routes: [
       // 动态路径参数 以冒号开头
       { path: '/user/:id', component: User }
     ]
   })

2. 路由组件传参（query 传参）

   this.$router.push({
       path: `/analysis/eventCreate`,
       query: {
         id：this.id
       }
   })

感觉两者达到的效果是差不多的，都是给路由组件传参。只不过动态路由匹配在 url 上看不到参数名，而 query 传参的方式是放在？后面且能看到参数名和值。

只是显示上的区别吗？
query 传参的方式完全能满足使用需求，为啥官方要出一个动态路由匹配呢？
有什么优势吗？

Answer 1

params 传参更加贴合 RESTful 架构的特征，便于记忆，对资源的表述更清晰；
例如sf，sf.gg/q/:id,sf.gg/u/:id 各自代表问题页和用户资料页
使用 query 传参更贴合 get 请求的形式，比如分页场景。

你用 params传递分页多参数看看？ /:sid/:size/:page => /6702C6712C675/1/15 这样? 太麻烦了，明显用 query 传参就明了很多 /list?id=6702C6712C675&size=15&page=3

根据不同的业务场景选择最合适的方式。

Answer 2

上面都说的很全面, 我再补充一个点, 比如你做秒杀页面, 页面是ssr生成好的, 直接靠id获取页面, 而不是在页面里面获取id再请求商品, 这是秒杀页面的一个优化点。

Answer 3

前者通过路由层级，可以更好的体现网站信息逻辑。比如 /users 是用户列表，/user/1 是 ID 为 1 的用户，/user/1/logs 是 ID 为 1 的用户的日志，/user/1/log/2 是 ID 为 1 的用户的第二条日志。

后者通常强调对同一功能的不同操作，比如翻页、筛选。

打个比方，你用勺子也能吃饭，为啥还要叉子、筷子？方向不一样。

Answer 4

静态形式的 URL 对 SEO 友好，对人肉记忆也友好。

就拿你这个问题的 URL 来说：

https://segmentfault.com/q/1010000039327371

你就处理成（举例子，思否显然是不支持的）：

https://segmentfault.com/q?id=1010000039327371

行不行？

太行了。