问答

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

作者:admin 2021-04-19 我要评论

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

在说正事之前,我要推荐一个福利:你还在原价购买阿里云、腾讯云、华为云服务器吗?那太亏啦!来这里,新购、升级、续费都打折,能够为您省60%的钱呢!2核4G企业级云服务器低至69元/年,点击进去看看吧>>>)
  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 传参的方式完全能满足使用需求,为啥官方要出一个动态路由匹配呢?
有什么优势吗?

###

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

行不行?

太行了。

版权声明:本文转载自网络,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。本站转载出于传播更多优秀技术知识之目的,如有侵权请联系QQ/微信:153890879删除

相关文章
  • nginx响应速度很慢

    nginx响应速度很慢

  • 点击选中的多选框,会在已选那一栏显示

    点击选中的多选框,会在已选那一栏显示

  • PHP 多态的理解

    PHP 多态的理解

  • 关于C语言中static的问题

    关于C语言中static的问题

腾讯云代理商
海外云服务器