vue-router query和params传参(接收参数)$router $route的区别

testHs 发布于2019-08-21 18:41 / 1132人阅读

今天做项目时踩到了vue-router传参的坑（query和params），所以决定总结一下二者的区别。 直接总结干货！！！ 1.query方式传参和接收参数

传参: 
this.$router.push({
        path:"/xxx",
        query:{
          id:id
        }
      })
  
接收参数:
this.$route.query.id

注意:传参是this.$router,接收参数是this.$route,这里千万要看清了！！！

this.$router 和this.$route有何区别？
在控制台打印两者可以很明显的看出两者的一些区别：

1.$router为VueRouter实例，想要导航到不同URL，则使用$router.push方法

2.$route为当前router跳转对象，里面可以获取name、path、query、params等

2.params方式传参和接收参数

传参: 
this.$router.push({
        name:"xxx",
        params:{
          id:id
        }
      })
  
接收参数:
this.$route.params.id

注意:params传参，push里面只能是 name:"xxxx",不能是path:"/xxx",因为params只能用name来引入路由，如果这里写成了path，接收参数页面会是undefined！！！

另外，二者还有点区别，直白的来说query相当于get请求，页面跳转的时候，可以在地址栏看到请求参数，而params相当于post请求，参数不会再地址栏中显示

vue的自学之路还得继续走，坑还会继续踩，下一个坑会是神马...

GPU云服务器云服务器 vue-router url query参数接收传入参数 python接收参数

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/90714.html

从头开始学习vue-router

摘要：路由模块的本质就是建立起和页面之间的映射关系。这时候我们可以直接利用传值了使用来匹配路由，然后通过来传递参数跳转对应路由配置于是我们可以获取参数六配置子路由二级路由实际生活中的应用界面，通常由多层嵌套的组件组合而成。一、前言要学习vue-router就要先知道这里的路由是什么？为什么我们不能像原来一样直接用标签编写链接哪？vue-router如何使用？常见路由操作有哪些？等等这些问...

tommego 2019-08-23 12:55 评论0 收藏0
从头开始学习vue-router

摘要：路由模块的本质就是建立起和页面之间的映射关系。这时候我们可以直接利用传值了使用来匹配路由，然后通过来传递参数跳转对应路由配置于是我们可以获取参数六配置子路由二级路由实际生活中的应用界面，通常由多层嵌套的组件组合而成。一、前言要学习vue-router就要先知道这里的路由是什么？为什么我们不能像原来一样直接用标签编写链接哪？vue-router如何使用？常见路由操作有哪些？等等这些问...

jhhfft 2019-08-02 11:56 评论0 收藏0
从头开始学习vue-router

摘要：路由模块的本质就是建立起和页面之间的映射关系。这时候我们可以直接利用传值了使用来匹配路由，然后通过来传递参数跳转对应路由配置于是我们可以获取参数六配置子路由二级路由实际生活中的应用界面，通常由多层嵌套的组件组合而成。一、前言要学习vue-router就要先知道这里的路由是什么？为什么我们不能像原来一样直接用标签编写链接哪？vue-router如何使用？常见路由操作有哪些？等等这些问...

frontoldman 2019-08-29 17:11 评论0 收藏0
vue常用操作及学习笔记（路由跳转及路由传参篇）

摘要：也可以从其他文件进来定义路由每个路由应该映射一个组件。其中可以是通过创建的组件构造器，或者，只是一个组件配置对象。路由跳转 - 超链接方式跳转 html： Hello App! Go to Foo Go to Bar router.js...

megatron 2019-08-23 11:27 评论0 收藏0
vue-router 基础知识点

摘要：路由模块的本质就是建立起和页面之间的映射关系。模式的原理是事件监测值变化，可以在对象上监听这个事件。这两个方法应用于浏览器记录栈，在当前已有的基础之上，它们提供了对历史记录修改的功能。 vue-router 这里的路由并不是指我们平时所说的硬件路由器，这里的路由就是SPA（单页应用）的路径管理器。再通俗的说，vue-router就是WebApp的链接路径管理系统。vue-router是...

ningwang 2019-08-26 10:41 评论0 收藏0