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

vue中router常见的三种传参方式(vue-router动态传参)

zonemu3个月前 (07-12)技术文章40

目录:我们在使用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()进行传参避免在刷新以后数据丢失的情况

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

相关文章

学习ES6- 入门Vue(大量源代码及笔记,带你起飞)

ES6学习网站: https://es6.ruanyifeng.com/箭头函数普通函数//普通函数 this 指向调用时所在的对象(可变) let fn = function fn(a, b) {...

「 VUE3 + TS + Vite 」父子组件间如何通信?

组件之间传值,大家都很熟悉,涉及到 VUE3 +TS 好多同学就无从下手了,所以分享这篇文章,希望看完后提起 VUE3+TS 能够不慌不忙。平时使用的函数如:ref、reactive、watch、co...

java调用API操作GitLab(java调用zabbix api)

最近需要在一个WEB项目中集成GitLab,用到了GitLab的API操作,在网上找了很久都是说直接调用GitLab的Http接口,而且API官方只有javadoc没有其它说明文档,特别记录下,以备查...

Java教程:GitLab在项目的环境搭建和基本的使用

gitlab-使用入门1 导读本教程主要讲解了GitLab在项目的环境搭建和基本的使用,可以帮助大家在企业中能够自主搭建GitLab服务,并且可以GitLab中的组、权限、项目自主操作GitLab简介...

(在线编辑DWG)网页CAD二开实现焊接符号绘制

前言在工程制图和制造领域,焊接符号(Welding Symbols)是用于表示焊缝类型、尺寸、位置以及工艺要求的标准化图形语言。广泛应用于机械设计、钢结构、船舶制造、压力容器等行业中,帮助技术人员理解...

(一)熟练HTML5+CSS3,每天复习一遍

前言学习网页的概念和分类,了解静态网页和动态网页的不同;了解网页浏览器的工作原理。了解HTML,XHTML,HTML5的概念,制作简单的HTML页面的开发。什么是网页可以在internet上通过网页浏...