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

Vue页面传参详解

ruisui883个月前 (01-12)技术分析24

一、两种方式

方法1:name跳转页面

this.$router.push({name:'anotherPage',params:{id:1}})

另一页面接收参数方式:

this.$route.params.id

示例:

控制台展示:

方法2:path跳转页面

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

另一页面接收参数方式:

this.$route.query.id

示例:

二、区别

1、path的query传参的参数会带在url后边展示在地址栏(/anotherPage?id=1),name的params传参的参数不会展示到地址栏。

2、由于动态路由也是传递params的,所以在 this.$router.push() 方法中path不能和params一起使用,否则params将无效,需要用name来指定页面。

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

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

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

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

“Vue页面传参详解” 的相关文章

Linux发行版Nobara更新39版本,号称“专为游戏玩家定制”

IT之家 12 月 27 日消息,Linux 发行版 Nobara 今天推出了 39 版本,主要改进了“Gamescope 合成器”,并更新了 OBS Studio、部分驱动程序及 Nautilus 文件管理器,小伙伴们可以点此访问项目地址。IT之家经过查询得知,Nobara 是一款基于 Fedor...

使用cgroup限制进程资源

这里使用containerd项目中的cgroup包来实现进程资源限制。先写一个耗费一个CPU并且一秒增加10m内存的测试进程package mainimport ( "fmt" "math/rand" "time")func main() { go f...

2024最新版:前端性能优化方案汇总

前端训练营:1v1私教,终身辅导计划,帮你拿到满意的 offer。 已帮助数百位同学拿到了中大厂 offer。欢迎来撩~~~~~~~~Hello,大家好,我是 Sunday。前端性能优化一直是很多同学非常关注的问题,在日常的面试中也是经常会被问到的点。所以今天咱们就花一点时间来了解一下2024最新的...

12种JavaScript中最常用的数组操作整理汇总

数组是最常见的数据结构之一,我们需要绝对自信地使用它。在这里,我将列出 JavaScript 中最重要的几个数组常用操作片段,包括数组长度、替换元素、去重以及许多其他内容。1、数组长度大多数人都知道可以像这样得到数组的长度:const arr = [1, 2, 3]; console.log(a...

vue-router是如何解析query参数呢? #前端

vue-router 中的 query 解析。1. 大家好,我是龙仔。今天来分享 vue-router 是如何解析快乐参数的,因为使用 vue 路由会传 query 参数和快乐参数,所以从 vue 的角度来看如何解析传递的快乐参数。2. 基础知识大家应知道,快乐参数结构如:a、b、c、a、b、c、a...

Vue Router 4 路由操作 - 路由导航

路由导航分为 声明式导航 和 编程式导航。通过 <router-link to="..."> 标签跳转的方式为声明式导航。通过 路由实例对象(router.push(...))跳转的为编程式导航。导航到不同的位置想要导航到不同的URL,使用 router.push 方法。...