Vue路由传参页面刷新后参数丢失原因和解决办法

目录
  • vue路由传参方法
  • 原因分析：
  • 解决方案：
  • 总结

vue路由传参方法

在编写vue项目时，时常会使用路由在不同页面中传递参数，常见使用方式如下：

this.$router.push({
  path: "/test",
  query: {
    a: 1,
    b: 2
  }
})

这样我们就传递了两个参数，在 /test  页面 就可以接收这两个参数

let a = this.$route.query.a;
let b = this.$route.query.b;

可以看到浏览器进行了url参数拼接传参，有点像get请求的意思

如果不想显示参数拼接在url中，可以使用parmars传参，同时path失效，需要用name指定路由，前提vueRouter中有name对应的路由，才能匹配对应的路径

this.$router.push({
   name: "test",
   params: {
      a: 1,
      b: 2
   }
})

接收参数方式 与query方式类似

let a = this.$route.parmars.a;
let b = this.$route.parmars.b;

看起来有点像post请求

以上看起来一切正常，但是一旦传递的参数中包含对象之后，问题就出现了

原因分析：

参数传递变为了[object object] ，这个我们非常熟悉，是对象被强制转化为字符串的结果

恍然大悟！原来vue路由传值会把参数都转换为字符串进行拼接,相当于String(参数)

解决方案：

解决方案很简单，就是使用JSON

传递参数时将参数转化为JSON字符串

this.$router.push({
  path: "/test",
  query: {
    a: JSON.stringify({test : 'test}),
    b: 2
  }
})

接收时再转化为对象

let a = JSON.parse(this.$route.query.a);
let b = this.$routr.query.b;

完美解决

总结

到此这篇关于Vue路由传参页面刷新后参数丢失原因和解决办法的文章就介绍到这了,更多相关Vue路由传参页面刷新参数丢失内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • 如何处理vue router 路由传参刷新页面参数丢失

    如何处理vue router 路由传参刷新页面参数丢失

    概述 常见场景:点击列表的详情,跳转到详情内页,在内页根据传递的参数获取详情数据. 路由传参一般有如下几种方式,下面主要介编程式导航 router.push 的传参方式: 方法一:通过 params 传参 路由配置如下: { path: '/detail/:id', //若id后面加?代表这个参数是可选的 name: 'detail', component: Detail } 通过 $router.push 中 path 携带参数的方式 // 列表中的传参 goDetail(row) { thi

  • vue路由传参页面刷新参数丢失问题解决方案

    最近项目中涉及到跨页面传参数和后台进行数据交互,看到需求之后第一反应就是用路由传参来解决:Vue中给我们提供了三种路由传参方式,下面我们一个一个的来看一下: 方法一:params传参: this.$router.push({ name:"admin", //这里的params是一个对象,id是属性名,item.id是值(可以从当前组件或者Vue实例上直接取) params:{id:item.id} }) //这个组件对应的路由配置 { //组件路径 path: '/admin', //

  • Vue路由传参页面刷新后参数丢失原因和解决办法

    目录 vue路由传参方法 原因分析: 解决方案: 总结 vue路由传参方法 在编写vue项目时,时常会使用路由在不同页面中传递参数,常见使用方式如下: this.$router.push({ path: "/test", query: { a: 1, b: 2 } }) 这样我们就传递了两个参数,在 /test  页面 就可以接收这两个参数 let a = this.$route.query.a; let b = this.$route.query.b; 可以看到浏览器进行了url参数

  • vue路由传参方式的方式总结及获取参数详解

    目录 一.声明式传参 1.params传参(显示参数) 2.params传参(不显示参数) 3.query 传参 二.编程式传参 1.params传参(显示参数) 2.params传参(不显示参数) 3.query 传参 三.获取参数 1.params的获取方式 2.query的获取方式 四.需要注意的点 总结 一.声明式传参 1.params传参(显示参数) 在url中会显示出传参的值,刷新页面不会失去拿到的参数,使用该方式传值的时候,需要子路由提前配置好参数: //路由参数配置 const

  • vue路由传参接收以及传参对象为对象时的问题及解决

    目录 路由传参接收以及传参对象为对象时的问题 场景 接收路由参数 vue路由传参总结 Vue路由传参 路由传参接收以及传参对象为对象时的问题 具体代码如下所示: 场景 <div @click='toDetail'>查看详情</div> 路由传参不能直接传一个对象,需要使用JSON.stringify()方法将其转换成一个字符串,然后在其他页面接受的时候再使用JSON.parse()方法转换成一个对象 const router = useRouter() const toDetail

  • vue路由传参的基本实现方式小结【三种方式】

    本文实例讲述了vue路由传参的基本实现方式.分享给大家供大家参考,具体如下: 前言 vue 路由传参的使用场景一般都是应用在父路由跳转到子路由时,携带参数跳转.传参方式可划分为 params 传参和 query 传参,而 params 传参又可分为在 url 中显示参数和不显示参数两种方式,这就是vue路由传参的三种方式. 方式一:params 传参(显示参数) params 传参(显示参数)又可分为 声明式 和 编程式 两种方式 1.声明式 router-link 该方式是通过 router-

  • Vue路由传参及props解耦深入分析

    目录 一.路由传参 query传参 query配合声明式导航 query配合编程式导航 query传参的特点 params传参 路径使用参数占位时 路径不使用占位时 二.props解耦 1.props布尔值 2.props函数模式 3.props对象模式 关于路由传参的几种方式,众说纷纭.今天来总结下路由传参的几种方式与路由解耦: 一.路由传参 路由传参总的来说有两种方式,query和params,配合声明式导航与编程式导航,各有不同的几种写法: query传参 query配合声明式导航 //路

  • 详解Vue路由传参的两种方式query和params

    Vue路由传参的两种方式query和params 一.router-link 1. 不带参数 <router-link :to="{name:'home'}"> <router-link :to="{path:'/home'}"> //name,path都行, 建议用name // 注意:router-link中链接如果是'/'开始就是从根路由开始,如果开始不带'/',则从当前路由开始. 2.带参数 <router-link :to=&

  • Vue路由传参详细介绍

    Vue路由传参详细介绍

    目录 路由传参 效果展示 params的类型(后附源码) ​​​​​​query参数的类型 路由name 路由传参 效果展示 通过传参,可以让Persons路由组建中的内容,在新的路由组件Show显示出来,Show路由组件要嵌套到Persons路由组件中 Persons路组件中的内容 params的类型(后附源码) path:‘show/:id/:realname’ :id/:realname,是为传参所声明的,props:true 可以理解成可以传参,这只是其中的一种方法,也是个人觉得最简单理

  • Vue 路由传参加密的示例代码

    首先,创建一个base64.js const Base64 = { //加密 encode(str) { return btoa(encodeURIComponent(str).replace(/%([0-9A-F]{2})/g, function toSolidBytes(match, p1) { return String.fromCharCode('0x' + p1); })); }, //解密 decode(str) { // Going backwards: from bytestre

  • vue路由传参三种基本方式详解

    这篇文章主要介绍了vue路由传参三种基本方式详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 现有如下场景,点击父组件的li元素跳转到子组件中,并携带参数,便于子组件获取数据. 父组件中: <li v-for="article in articles" @click="getDescribe(article.id)"> methods: 方案一: getDescribe(id) { // 直接调用$r

随机推荐