当前位置:首页 > 技术分析 > 正文内容

vue中router常见的三种传参方式

ruisui885个月前 (01-12)技术分析32

目录:我们在使用vue开发的过程中使用router跳转的时候肯定会遇到传参的情况;一般情况就三种传参是最常见的;那我们就来看看都有那几种传参方式吧!

第一种:

{
    path: '/mall:id',
    name: 'Mall',
    component: lazyLoadMall('mall')
  }
this.$router.push(`/mall${0}`)

获取参数:

console.log(this.$route.params) // 这儿原来写错了;感谢 @用户5158362048184 提出并修改

第二种:

this.$router.push({ name: 'Mall', query: { id: 0 } })

获取参数:

console.log(this.$route.query)

第三种:

this.$router.push({ name: 'Mall', params: { id: 0 } })

获取参数:

console.log(this.$route.params)

注意:第三种传参在刷新后数据会丢失;可以用JSON.stringify()进行传参避免在刷新以后数据丢失的情况

如果有什么不对的地方;欢迎大家补充;相互学习、共勉

扫描二维码推送至手机访问。

版权声明:本文由ruisui88发布,如需转载请注明出处。

本文链接:http://www.ruisui88.com/post/198.html

标签: vue路由传值
分享给朋友:

“vue中router常见的三种传参方式” 的相关文章

vue组件间的九种通信方式

前言Vue组件实例间的作用域是相互独立的,而通常一个页面是由很多个组件构成,这些组件可能又嵌套了组件,形成了一个关系网图,它们的关系可能是像下图中一样,大致分为两种使用场景,父子组件间通信和非父子组件间通信,父子组件间通信又分为直接父子关系和间接父子关系。vue提供了多种通信方法,针对不同的通信需求...

前后端分离自动化运维平台开发

运维平台采用前后端分离:前端vue,框架vue-element-admin;后端python,框架django-rest-framework.目前运维平台模块如下:1、 CMDB管理应用管理、环境管理、开发语言管理、产品项目管理、资产管理2、 构建发布持续构建、持续部署、Jar工程依赖构建3、 容器...

代码分支规范

一.gitflow工作流说明:主分支:master,稳定版本代码分支,对外可以随时编译发布的分支,不允许直接Push代码,只能请求合并(pull request),且只接受hotfix、release分支的代码合并。gitlab上做限制。热修复分支:hotfix,针对现场紧急问题、bug修复的代码分...

Gitlab之间进行同步备份

目前,我们公司有两个研发团队,分别在北京和武汉,考虑到访问速度的问题,原有武汉的研发环境在近端部署。也就是北京和武汉分别有两套独立的研发管理环境,虽然这解决了近端访问速度的问题,但是管理上较为分散,比如研发环境备份和恢复就是最重要的问题之一。最近,处于对安全性和合规性的考虑,希望将北京和武汉的源代码...

身体越柔软越好?刻苦拉伸可能反而不健康 | 果断练

坐下伸直膝盖,双手用力向前伸,再用力……比昨天前进了一厘米,又进步了! 这么努力地拉伸,每个人都有自己的目标,也许是身体健康、线条柔美、放松肌肉、体测满分,也可能为了随时劈个叉,享受一片惊呼。 不过,身体柔软,可以享受到灵活的福利,也可能付出不稳定的代价,并不是越刻苦拉伸越好。太硬或者太软,都不安全...

HTML5最新版本介绍

HTML5是HTML4.01和XHTML1.0之后超文本标记语言的最新版本,由一群自由思想者设计,最终实现了多媒体支持、交互性、更智能的表单和更好的语义标注。 HTML 5不只是 HTML规范的最新版本,它是用于生成现代 Web内容的一系列相关技术的总称,其中最重要的三个技术是:HTML5核心规范...