VUE路由传参踩坑

最新推荐文章于 2023-09-17 07:58:52 发布
最新推荐文章于 2023-09-17 07:58:52 发布
阅读量460 收藏
点赞数 1
分类专栏： bug记录 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_37622750/article/details/118907102
版权

VUE页面使用push传递参数

当使用$router.push进行传递复杂数据类型时，如果有字段的属性为Date对象，那么将会转换成字符串（乱码），这样就不能在$route.query中获取到正确的日期对象。
解决方式：

  1. 在传递数据前使用JSON.stringfy(data)转换成JSON格式
  2. 注意：push中的配置项query或者params接受的是一个对象，所以需要定义一个字段来存储JSON数据
this.$router.push({name:url,query:{data:JSON.stringfy(data)}})
  1. 在获取数据时需要使用JSON.parse(this.$route.query.data)获取数据
    bugger记录
初入前端的小谢
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue—路由传参的几种方式
雷雨天的雷胖子
04-03 288
目录 一、概述 二、详解 一、概述 $route为当前路由对象。$router为全局路由实例，即VueRouter实例。 二、详解 如下图所示，以子组件接收参数的方式为标准，路由传参可分为三种方法。 方法一：利用动态路由传参 如下代码所示，配置路由。 {path: '/a/:num', name: A, component: A} 父组件中执行切换路由操作及传参，如下代码所示。 // 方法1：使用router-link路由导航 <router-link to="/a
vue路由传参 vue路由传参
11-18
Vue.js 是一款流行的前端框架，它的路由管理器 Vue Router 是实现单页面应用（SPA）功能的重要组成部分。在构建SPA的过程中，我们经常需要在不同的路由之间传递参数，以便于组件之间共享数据。Vue Router 提供了两种...
命名式vue路由传参的踩坑
weixin_30377461的博客
05-17 134
2018-05-17 最近在重构之前写的electron-vue项目，发现以前老是滥用vuex传值，于是想重新整理项目中的数据传递过程，然后在命名式导航上踩了个坑~~~~~~~~~ 命名式导航用query传参，路由地址可以用path指定，但是要用params传参的时候必须用name指定目标组件名，否则无法在$route上获取参数 <router-link :to="{path:...
Vue路由传参的三种基本方式
w13707470416的博客
04-03 375
Vue路由传参的三种基本方式 现有如下场景，点击一个button按钮跳转到另外一个路由页面，并向目标路由页面传递参数，便于目标路由页面获取源页面传递的数据信息。源页面中： &lt;button @click="gotoTargetView"&gt;点击跳转到目标路由user页面&lt;/button&gt; 方案一，通过调用$router对象的push()方法，...
在vue中,如何禁止回退上一步，路由不存历史记录
果果的博客
10-24 2万+
在有些情况下，我们不想往路由里添加历史记录。（vue的项目，vue-router中不想存历史记录） 根据vue官网提供的，楼主总结了一下，主要有以下几种方案： 根据官网的解释 。声明式路由和编程式路由都是添加新的记录，同时vue还提供了replace来替换路由记录，从而实现路由不存历史记录的情况，以下是楼主总结的几种方法： 声明式路由 编程式 原生js实现 楼主...
【Vue】路由传参方式
Shino_jie的博客
06-30 1035
在使用params传递参数时，需要使用name来指定目标，否则会出现数据传输失败vue的路由传参共有三种方式1.query传参：不管使用path还是name来匹配路由都可以，然后通过query来传递参数，这种情况下 query传递的参数会显示在url（浏览器上看到的链接）后面 2.params传参：通过路由属性中的name来确定匹配的路由，通过params来传递参数。 3.路径传参：直接通过path，直接携带参数进行路由传参，使用该方式传值的时候，需要子路由提前配置好参数，接收时也是通过this.$
VUE路由传参的两种方式
weixin_42250577的博客
03-29 626
VUE路由传参的两种方式 1、使用query传参（类似于get方式） //跳转地址和携带的参数，跳转的地址path的值需要与路由中的path的值对应 this.$router.push({path: '/test', query: {name: 'tom'}}) //路由表配置 routes = [ { path: '/test' name: 'test' component: TestComponent } ] //接受传过来的参数 this
vue路由传参三种基本方式详解
10-15
Vue.js 是一个流行的前端框架，它的路由管理器 Vue Router 是实现单页面应用（SPA）导航的重要组成部分。在Vue Router中，有三种基本的途径来传递参数给目标组件，分别是通过`params`、`query`以及直接在路径中硬...
vue路由传参的基本实现方式小结【三种方式】
01-19
本文实例讲述了vue路由传参的基本实现方式。分享给大家供大家参考，具体如下： 前言 vue 路由传参的使用场景一般都是应用在父路由跳转到子路由时，携带参数跳转。传参方式可划分为 params 传参和 query 传参，而 ...
3种vue路由传参的基本模式
08-28
Vue 路由传参的 3 种基本模式 在 Vue 中，路由传参是连接各个页面的桥梁，而参数在其中扮演着异常重要的角色，决定着两座桥梁是否能够连接成功。在 Vue 路由中，支持 3 种传参方式，即使用 `$router.push` 实现携带...
Vue路由的跳转和传参
06-22
Vue路由跳转的两种方式、路由传参的两种方式
vue路由传参页面刷新参数丢失问题解决方案
12-13
Vue中给我们提供了三种路由传参方式，下面我们一个一个的来看一下： 方法一：params传参： this.$router.push({ name:"admin", 　//这里的params是一个对象，id是属性名，item.id是值(可以从当前组件或者Vue实例上...
vue路由传参的几种方式
最新发布
weixin_52512511的博客
09-17 1545
一、使用router-link进行路由导航，传递参数这里要特别注意：在子组件中获取参数的时候是route.params而不是router一、使用router-link进行路由导航，传递参数父组件中：使用标签进行导航解释：child是子页面路径，123是需要传递的参数。
Vue路由传参三种方式
热门推荐
Senora的博客
07-19 3万+
1、params传参：通过params传递参数，如果我们想获取 id 的参数值，可以通过this.$route.params.id这种方式来打印出来就可以得到了； 2、路由属性配置传参：可以用this.$route.params.id来获取到 id 的值 3、query传参：可以解决页面刷新参数消失问题的，这种方式可以理解为是 ajax 中的 get 方法，参数是直接在 url 后面添加的，参数是可见的，所以解决页面刷新参数消失问题建议使用此方法来解决；...
【vue】vue路由传参的三种方式
weixin_42762167的博客
02-27 2014
【vue】vue路由传参的三种方式 &lt;article class="baidu_pl"&gt; &lt;div id="article_content" class="article_content clearfix csdn-tracking-statistics" data-pid="blog" data-mod="popu_307" data-dsm="post
vue中路由的几种传参方式
zhukehan24的博客
08-29 425
首先声明式导航（如下图）本质就是调用了router.push来实现的，这个方法会向 history 栈添加一个新的记录，所以，当用户点击浏览器后退按钮时，则回到之前的 URL。 <router-link :to="..."> 今天朱老板带大家简单的看下router.push（）的传参方法。 首先他能传参的范围是一个描述地址的对象或者字符串，如下图 // 字符串 router.push('home') // 对象 router.push({ path: 'home' }) // 命
Vue路由传参的三种方式
xiangzhihong8的专栏
11-17 515
现有如下场景，点击父组件的li元素跳转到子组件中，并携带参数，便于子组件获取数据。 父组件中： &lt;li v-for="article in articles" @click="getDescribe(article.id)"&gt; 方案一 getDescribe(id) { // 直接调用$router.push 实现携带参数的跳转 this.$router.pus...
Vue：路由传参的三种方式
流楚丶格念的博客
06-26 8631
【vue】vue路由传参的三种方式vue 路由传参的使用场景一般都是应用在父路由跳转到子路由时，携带参数跳转。传参方式可划分为 params 传参和 query 传参，而 params 传参又可分为在 url 中显示参数和不显示参数两种方式，这就是vue路由传参的三种方式。params 传参（显示参数）又可分为 声明式 和 编程式 两种方式该方式是通过 router-link 组件的 to 属性实现，该方法的参数可以是一个字符串路径，或者一个描述地址的对象。使用该方式传值的时候，需要子路由提前配置好参数，例
Vue路由传参详解：3种方式及区别
Vue路由传参是Vue.js中用于管理单页面应用（SPA）间导航和状态传递的重要功能。本文将详细介绍三种常见的Vue路由参数传递方式：query、params以及直接在URL中拼接参数。 1. **通过query传参**： - **优点**: 可以...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值