共同点:

1、都可以传值

2、在另外一个组件中传递值的时候，都是放在$route中

不同点:

    1、传值时候，url的表现不一样

        query   /orderInfo?xxx=yyy&aaa=bbb

        params /orderInfo/yyy/bbb

    2、设置路由规则的时候不一样

        query  path:/orderInfo

        params path:/orderInfo/:orderId/:goodsId

    3、获取值的方式不一样

        query this.$route.query.orderId

        params this.$route.params.orderId

vue中params & query的比较的更多相关文章

  1. vue router使用query和params传参的使用

    传参是前端经常需要用的一个操作,很多场景都会需要用到上个页面的参数,本文将会详细介绍vue router 是如何进行传参的,以及一些小细节问题.有需要的朋友可以做一下参考,希望可以帮到大家. Vue ...

  2. （转）vue router 如何使用params query传参，以及有什么区别

    写在前面: 传参是前端经常需要用的一个操作,很多场景都会需要用到上个页面的参数,本文将会详细介绍vue router 是如何进行传参的,以及一些小细节问题.有需要的朋友可以做一下参考,喜欢的可以点波赞 ...

  3. 【原】vue-router中params和query的区别

    1.引入方式不同 query要用path来引入 this.$router.push({ path: 'test', query: { type: 2, detail: '哈哈' } }) params ...

  4. vue router 如何使用params query传参，以及有什么区别

    写在前面: 传参是前端经常需要用的一个操作,很多场景都会需要用到上个页面的参数,本文将会详细介绍vue router 是如何进行传参的,以及一些小细节问题.有需要的朋友可以做一下参考,喜欢的可以点波赞 ...

  5. vue中的路由的跳转的参数

    vue中的路由跳转传参 params 与 query this.$router.push({ name:"detail", params:{ name:'nameValue', c ...

  6. vue中Axios的封装和API接口的管理

    前端小白的声明: 这篇文章为转载:主要是为了方便自己查阅学习.如果对原博主造成侵犯,我会立即删除. 转载地址:点击查看 如图,面对一团糟代码的你~~~真的想说,What F~U~C~K!!! 回归正题 ...

  7. vue中$route 和$router的区别

    在vue中会出现一种情况 const url=this.$route.query.returnURL; this.$router.push(url);    $router和$route的区别傻傻的分 ...

  8. Vue中router两种传参方式

    Vue中router两种传参方式 1.Vue中router使用query传参 相关Html: <!DOCTYPE html> <html lang="en"> ...

  9. vue中axios的深入使用

    如上所示一条简单的请求数据,用到了vue中axios,promise,qs等等 这里我将vue中用到的axios进行了封装方便日后使用  先对工具类进行封装utils/axios.js: // 引入模 ...

随机推荐

  1. 打造vim成类source insight

    一.Ubuntu14.04下配置 1.配置vimrc文件 输入:version课查看vimrc文件及位置: system vimrc file: "$VIM/vimrc" user ...

  2. Struts2 输入校验 第四弹

    ActionSupport 里面有一个validate.可以重写里面你的方法. 校验执行流程: 1)首先进行类型转化 2)然后进行输入校验(执行validate方法) 3)如果在上述过程中出现了任何错 ...

  3. html5基本格式

    html5基本格式 学习要点: HTML5 文档的基本格式 2. 开发工具的基本操作 一．  文档基本格式 <!DOCTYPE  html>  文档声明,告诉计算机这是一个HTML5文档. ...

  4. 分享知识-快乐自己：自定义struts2类型转换的全局与局部错误信息。

    遇到类型转换错误的时候(也就是说不能进行类型转换),struts2框架自动生成一条错误信息,并且将该错误信息放到addFieldError里面.我们可以通过配置文件来替换这条由struts2自动生成的 ...

  5. IDEA编译less插件LESS CSS Compiler的安装

    1.IDEA插件地址:LESS CSS Compiler 百度云盘下载地址 2.安装Node.js,下载 3.打开idea→settings→plugins 安装:“nodejs”插件,并按以下步骤进 ...

  6. [Poi2011] Meteors（从不知所措到整体二分）

    Byteotian Interstellar Union (BIU) has recently discovered a new planet in a nearby galaxy. The plan ...

  7. 1095 Cars on Campus (30)（30 分）

    Zhejiang University has 6 campuses and a lot of gates. From each gate we can collect the in/out time ...

  8. 如何卸载ubuntu软件

    你的硬盘空间已经不太足够了?如果你使用的是Ubuntu操作系统,你可能想知道如何能够卸载过时.无用的程序.有几种方法可以卸载程序,包括图形化方法和命令行方法.参考本指南,采用最适合你的方法卸载程序. ...

  9. SVN版本控制详解

    1 版本控制 1.1 如果没有版本控制? Team开发必备. 一个人开发(必备). 版本控制:控制(代码)版本. 论文:版本控制? 毕业论文-4-22.doc 毕业论文-5-01.doc 毕业论文-f ...

  10. [codeforces161D]Distance in Tree(点分治/树形dp)

    题意:求树上距离为k的点对个数: 解题关键:练习一下点分治不用容斥 而直接做的做法.注意先查询,后更新. 不过这个方法有个缺陷,每次以一个新节点为根,必须memset mp数组,或许使用map会好些, ...