专栏首页前端基础vue2.0的三种路由传参方式

vue2.0的三种路由传参方式

为了方便自己查看,也许也能方便你学习,所以写一下

vue路由跳转不外乎就三种,其实还有一种就是js 的跳转方式

https://router.vuejs.org/ vue-router官网文档,相信有些同学不喜欢看官网,觉得说的云里雾里的

第一种,这个用的比较少,因为需要在路由配置

对应的路由配置如下

     this.$route.params.sessionId     第一种取参数的方式

第二种就用的比较多了

       this.$router.push({
          name: 'index',
          params: {
            id: id
          }
        })
     this.$route.params.id    第二种取参数的方式和第一种一样

params中是携带参数的,就相当于post一样,不会暴露出你传递的参数,name就是你路由配置中的对应路由的name (名字)

第三种路由传递参数方式了

  this.$router.push({
          path: '/describe',
          query: {
            id: id
          }
        })

这种就相当于get 传递参数,会把你的参数暴露出来

     this.$route.query.id   第三种取参数的方式

有没有想了解基于vue的即时通讯的啊,我会后面分享的哦,谢谢

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Vue2.5 零基础开发去哪儿网实战(二) - Vue 起步

    本章将快速讲解部分 Vue 基础语法,通过 TodoList 功能的编写,在熟悉基础语法的基础上,扩展解析 MVVM 模式及前端组件化的概念及优势。

    JavaEdge
  • 小程序navigationBarBackgroundColor颜色显示问题

    好长时间没有接触小程序了,感觉有点陌生,利用之前学的Vue根据mpVue框架重新熟悉一下小程序。

    honey缘木鱼
  • 前端之Vue.js库的使用

    Vue.js是前端三大新框架:Angular.js、React.js、Vue.js之一,Vue.js目前的使用和关注程度在三大框架中稍微胜出,并且它的热度还在递...

    skylark
  • 使用Webstorm快速启动Vue项目配置

    说一说关于Webstorm的具体操作的问题,这些对于大多数的人来说是一件很简单的事情,但是对于入门小白来说却能卡一下,不要问我是怎么知道的,因为我也是从只懂电脑...

    祈澈菇凉
  • 前端每周清单第 46 期: 2017 Node.js / GraphQL / Vue.js 盘点,前端性能优化与可用性保障

    前端每周清单专注前端领域内容,以对外文资料的搜集为主,帮助开发者了解一周前端热点;分为新闻热点、开发教程、工程实践、深度阅读、开源项目、巅峰人生等栏目。欢迎关注...

    王下邀月熊
  • 告别 hash 路由,迎接 history 路由

    在这里,隆重宣布本博客告别 Vue 传统的 hash 路由,迎接好看而优雅的 history 路由~~

    柳醉梦声
  • ENOENT: no such file or directory, access '/usr/local/lib/node_modules/vue-cli/node_modules/get-s...

    honey缘木鱼
  • Vuex数据页面刷新丢失问题解决方案

    用Vue做项目开发很久了,对于vuex能用、会用,但是因为状态脱离页面和刷新丢失两个原因,一直都有种抵触,特别是一些简单的数据都是通过query或者本地存储就解...

    木子墨
  • vue项目中遇到的那些事。

      有好几天没更新文章了。这段实际忙着做了一个vue的项目,从 19 天前开始,到今天刚好 20 天,独立完成。

    Dawnzhang
  • 前端每周清单第 44 期: 2017 JS 调查报告、REST 接口实时化、ESM 的过去与未来

    前端每周清单专注前端领域内容,以对外文资料的搜集为主,帮助开发者了解一周前端热点;分为新闻热点、开发教程、工程实践、深度阅读、开源项目、巅峰人生等栏目。欢迎关注...

    王下邀月熊

扫码关注云+社区

领取腾讯云代金券