$router是路由对象，是一个只写的对象

$route是当前路由的信息对象，是一个只读的对象

带参数路由跳转

1 query参数，这个是作为字符串拼接在url的后面，跟路由没有关系，demo：list/user没有也正常的路由到正确的路径。相当于get请求，请求的参数会在地址栏显示，可以用name或者path来引入路由，使用this.$route.query获取query对象中的参数

2 params参数，需要在路由中明确声明出来：demo：/list/user/:id,这个路由必须带上id参数，不然路由无法跳转（vue-cli3的项目中），参数是路由的一部分，

必须在路由后面带上参数名。相当于是post请求，参数在url中不显示，必须使用name来引入路由，如果使用path来引入，在第一次进入页面时rhis.$route.params.id可以获取到参数，页面刷新之后就成undifined了

vue-router parmas与query的区别的更多相关文章

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

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

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

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

  3. vue路由传值params和query的区别

    vue路由传值params和query的区别1.query传参和接收参数传参: this.$router.push({ path:'/xxx' query:{ id:id } })接收参数: this ...

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

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

  5. $router和$route的区别，路由跳转方式name 、 path 和传参方式params 、query的区别

    一.$router和$route的区别 $router : 是路由操作对象,只写对象$route : 路由信息对象,只读对象 例子://$router操作 路由跳转 this.$router.push ...

  6. vue router & query params

    vue router & query params vue router get params from url https://zzk.cnblogs.com/my/s/blogpost-p ...

  7. vue router 跳转到新的窗口方法

    在CreateSendView2.vue 组件中的方法定义点击事件,vue router 跳转新的窗口通过采用如下的方法可以实现传递参数跳转相应的页面goEditor: function (index ...

  8. Vue技术点整理-Vue Router

    路由 Vue Router 对于单页面应用来说,如果涉及到多个页面的话,就必须要使用到路由,一般使用官方支持的 vue-router 库 一,Vue Router 在项目中的安装引用 1,在页面中使用 ...

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

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

随机推荐

  1. Mysql 基础 1

    MySQL基础 1.概念 数据库,为我们提供高效.便捷的方式对数据进行增删改查的工具 优势 程序稳定.数据一致性.并发.效率 2.数据库管理系统 (DataBase Management System ...

  2. Kubernetes 学习14 kubernetes statefulset

    一.概述 1.在应用程序中我们有两类,一种是有状态一种是无状态.此前一直演示的是deployment管理的应用,比如nginx或者我们自己定义的myapp它们都属于无状态应用. 2.而对于有状态应用, ...

  3. 生成ROM时修改参数

    在Xilinx ISE中生成ROM后,如果修改参数,可能会出现错误: “The Memory Initialization vector can contain between 1 to Write” ...

  4. log4g：站在巨人的头上实现一个可配置的Go日志库

    更多精彩博文,欢迎访问我的个人博客 前言 本人Java程序员一枚,眼看着这几年Go的势头不错,本着技多不压身的原则,也随大流慢慢学习.不得不说Go其实跟Java差别还是挺大的,毕竟习惯了面向对象的思想 ...

  5. 第12组 Alpha冲刺（1/6）

    Header 队名:To Be Done 组长博客 作业博客 团队项目进行情况 燃尽图(组内共享) 展示Git当日代码/文档签入记录(组内共享) 注: 由于GitHub的免费范围内对多人开发存在较多限 ...

  6. 「雅礼集训 2017 Day10」拍苍蝇

    传送门 Description 有一天,小 A 的母亲对他家里的卫生状况非常不满意,他的房间里有非常多的苍蝇.在母亲的威逼利诱下,小 A 拿起了苍蝇拍去消灭家里的苍蝇.然而,小 A 以前从来没有亲手消 ...

  7. 通过源码安装RYU控制器

    目录 安装 测试 安装 安装pip3 sudo apt-get install python3-pip 获取ryu源码 git clone https://github.com/osrg/ryu.gi ...

  8. 第07组 Alpha冲刺（3/6）

    队名:摇光 队长:杨明哲 组长博客:求戳 作业博客:求再戳 队长:杨明哲 过去两天完成了哪些任务 文字/口头描述:对后端功能进一步完善. 展示GitHub当日代码/文档签入记录:(组内共用,已询问过助 ...

  9. org.apache.jasper.JasperException: The absolute uri: http://java.sun.com/jsp/jstl/core cannot be resolved in either web.xml or the jar files deployed with this application

    编程中遇到:org.apache.jasper.JasperException: The absolute uri: http://java.sun.com/jsp/jstl/core cannot ...

  10. PathVariable传过来的中文乱码是怎么回事

    今天在写一个spring mvc程序,由于客户原来设计的原因,不能传id过来,只能传名称,结果发现收到的数据是乱码. 百度之后,找到别人的解决方案,试了下没问题,转载一下.使用的web服务器是Tomc ...