vue中路由传参

最新推荐文章于 2025-06-11 02:06:48 发布

原创最新推荐文章于 2025-06-11 02:06:48 发布 · 308 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

前端同时被 2 个专栏收录

26 篇文章

订阅专栏

vue.js

14 篇文章

订阅专栏


A页面
<div @click="jump"></div>
jump(){
  this.$router.push({
    name: 'B页面的路由名字',
    params: {
      id: id
    }
  }) // 跳转到更新页面并传递参数id

}

B页面

mounted(){

let routerParams = this.$route.params.id

console.log(routerParams)

}

这样B页面就获取到A页面的参数了

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

大秦白起

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

【Vue实战】如何用动态路由传值，用实例谈谈this.$router.push 与 this.$route.params

web-Danli的博客

11-10

1781

文章目录前言一、动态路由是什么？二、使用步骤1.引入库2.读入数据总结前言前期我用props以及$emit()等方法来实现父子组件之间的相互传值。【Vue实战】自定义组件数据传值以及组件动态切换实例想看的小伙伴可以点击进去浏览哦~ 后面学习了vue-cli脚手架之后，关于在脚手架上搭建这个项目，则需要改写一些代码了，其中会涉及到动态路由的传值问题，接下来我们一步步来改写，来实现效果。一、动态路由是什么？示例：pandas 是基于NumPy 的一种工具，该工具是为了解决数据分析任务而创建的。

参与评论您还未登录，请先登录后发表或查看评论

this.$router路由params、query传参

前端小菜鸟的成长记录

10-13

2661

路由跳转传参

vue2 - 使用this.$route.params获取不到参数的原因

尽日寻春不见春，芒鞋踏遍陇头云。归来笑拈梅花嗅，春在枝头已十分。

11-17

1万+

如果想要this.$route.params 获取到this.$route.push()传的参数，一定要使用name属性来指定路由不要用path属性；

vue中this.$route.query和this.$route.params & query传参和params传参的使用和区别

weixin_44867717的博客

11-18

3万+

vue中this.route.query和this.route.query和this.route.query和this.route.params & query传参和params传参的使用和区别 1.query传参：路由： var router = new VueRouter({ routes: [ { path: '/login', component: login }, { name:'register',path: '/register'

VUE 路由传递参数及获取总结

sensor_WU 博客

05-12

3641

方法一动态路由（这里用来测试，传了两个参数username和post_id） //路由配置 { path: '/user/:username/:post_id', name: 'User', component: User } //跳转 this.$router.push({ path: `/user/${username}/${post_id}`, }) 匹配路径：/user/evan/123 传递的参数：{ username: 'ev

【Vue】- 路由及传参

不靠谱先森的博客

09-18

1781

什么是单页面应用程序?● 所有功能在一个html页面上实现单页面应用优缺点?● 优点：按需更新性能高，开发效率高，用户体验好● 缺点：学习成本，首屏加载慢，不利于SEO应用场景?● 系统类网站 / 内部网站 / 文档类网站 /移动端站点什么是路由？○ 路由是一种映射关系Vue中的路由是什么?○ 路径和组件的映射关系○ 根据路由就能知道不同路径的，应该匹配渲染哪个组件如何实现路径改变，对应组件切换,应该使用哪个插件?○ Vue 官方插件 VueRouter。

vue路由传参总结

最初的梦想

09-04

3418

文章目录利用`router-link`进行路由传参利用`this.$router.push`方式传参通过路由中name属性匹配路由，通过params传参通过匹配name属性，并通过query方式传参利用path匹配路由，并使用query传参利用router-link进行路由传参通过该方法切换路由后，地址栏是"test.html#/list/2"这种样式的利用该方式传参在获取参数时使用"$...

Vue路由传参

热门推荐

zhouzuoluo的博客

07-28

5万+

前言：顾名思义，vue路由传参是指嵌套路由时父路由向子路由传递参数，否则操作无效。传参方式可以划分为params传参和query传参，params传参又可以分为url中显示参数和不显示参数两种方式。具体区分和使用后续分析。参考官网：https://router.vuejs.org/zh/guide/essentials/navigation.html params传参（url中显示参数） ...

vue路由传参到底有几种方式

于于的博客

08-24

1万+

看了很多篇博客，路由传参说有几种方式的都有，看得我都晕了，都不知道到底有几种了，因为很多博客分析的角度不同，所以把我搞得有点乱，最后还是通过实践来搞清楚了，其实本身就是那么几种形式，但方式其实就两种query和params，下面分别就这两个方式来说：一、params params有三种传参形式 1、router-link形式传参【在路径中显示参数，刷新页面参数不丢失】 //配置路由 path:'/path/:id' //传递方式，在path后面跟上对应的值 <router-link :to="`/

【Vue】路由1——路由的引入以及路由的传参

2301_80636070的博客

05-18

1069

路由是前端开发中实现页面切换和内容展示的重要机制。在单页面应用中，通过配置不同的路径与组件的对应关系，用户点击导航栏时无需刷新页面即可完成内容切换。Vue 中使用 Vue Router 插件进行路由管理，开发者通过 `router-link` 实现导航，通过 `router-view` 指定组件的展示区域。路由支持多级嵌套，同时可以通过 query 或 params 传递参数，并在组件内通过 `$route` 获取。为了提高组件复用性和代码清晰度，还可以配置 props 方式将参数直接映射为组件的属性。

vue 路由传参的两种方式

君非道的博客

08-11

2528

vue 路由传参虽然有好几种写法，但本质上分为两种，一种是 get 类型的传参，一种是 post 类型的传参。 1. get 类型的传参 get 类型传参的三种写法: this.$router.push('/addres?id=12345') this.$router.push({ path: "/addres", query: { id: 12345 } }) this.$router.push({ n

Vue2路由传参 & Vue3路由传参

qq_48701993的博客

07-23

918

Vue2路由传参与Vue3路由传参的区别

Vue 3 路由传参使用指南

Franciz777的博客

05-24

3476

在 Vue 3 应用中，路由传参是实现页面间数据传递的核心功能。Vue Router 4 作为官方路由库，提供了多种传参方式，适用于不同场景。本指南将详细介绍这些方法的使用、场景和最佳实践。}, fetchUserInfo() { // 异步获取用户信息 return fetch(`/api/users/${this.userId}`).then(res => res.json());} }});

vue2 - 路由传参的三种方式详解

尽日寻春不见春，芒鞋踏遍陇头云。归来笑拈梅花嗅，春在枝头已十分。

07-14

1万+

本文介绍了Vue Router V3版本中三种路由传参方式：1) params传参(显示参数)，通过动态路由匹配实现，需在路由表配置参数，刷新不丢失数据；2) params传参(不显示参数)，通过name匹配传递，但刷新会丢失参数；3) query传参，参数显示在URL问号后，刷新不丢失。文中详细说明了每种方式的配置方法、传参语法和参数获取方式，并特别提醒了显示/不显示参数方式的注意事项及响应路由参数变化的处理方法。