vue的动态路由匹配和路由组件传参(query传参)有什么区别?

唐伯虎点蚊香
  • 376
  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 传参的方式完全能满足使用需求,为啥官方要出一个动态路由匹配呢?
有什么优势吗?

回复
阅读 517
4 个回答

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

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

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

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

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

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

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

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

https://segmentfault.com/q/1010000039327371

你就处理成(举例子,思否显然是不支持的):

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

行不行?

太行了。

你知道吗?

宣传栏