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

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

zonemu7小时前技术文章1

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

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

相关文章

Excel VBA 主界面/一步一步带你设计【收费管理系统】02

本文于2023年5月14日首发于本人同名公众号,更多文章案例请关注微信公众号:Excel活学活用!☆本期内容概要☆用户窗体设置:主界面、主页设计上期我们分享了EXCEL读取ACCESS数据库表,实现系...

据说是可以替代 Windows 的 5个 Linux 发行版

现如今有数以千计的 Linux 发行版可供您使用,然而人们却无法选择一个完美的操作系统来替代 Windows。 使用 Windows 时,傻瓜都能操作自如,同样的方法却不适用于 Linux。在这里,您...

2024前端面试真题之—VUE篇(前端面试题vuex)

添加图片注释,不超过 140 字(可选)1.vue的生命周期有哪些及每个生命周期做了什么? beforeCreate是new Vue()之后触发的第一个钩子,在当前阶段data、methods、com...

Vue3开发极简入门(16):祖孙组件间通信之provide&inject

前文说了Vue的组件间关系,有父子、爷孙、其他关系。例如之前的Father、Son是父子关系,App与Son就是爷孙关系。而props的Son,与emits的Son,就是其他关系。前文的props是父...

Vue3,父组件子组件传值,provide(提供)和inject(注入)传值

父组件向子组件传值父子组件传递数据时,通常使用的是props和emit,父向子传递使用props,子向父传递使用emit。子组件接收3种方式// 1、简单接收 props:["title...

react hooks自定义组件居然能这样做

前言  这里写一下如何封装可复用组件。首先技术栈 react hooks + props-type + jsx封装纯函数组件。类组件和typeScript在这不做讨论,大家别白跑一趟。接下来会说一下封...