Vue路由params、query参数丢失解决

在vue中路由传参有两种形式：1.params；2.query

解决办法：sessionStorage或者localStorage
两者的区别：localStorage是永久保存不清除一直存在,sessionStorage关闭客户端即清除

首先有两个页面，通俗点页面一和页面二；
页面一给页面二传递路由参数

params参数

   this.id = 666this.$router.push({name: '页面二',params: {id: this.id}})

在页面二获取参数id

    let id = this.$route.params.id console.log(id) //666

id为我们传送的666；
但是，
我们刷新页面的话，就会造成参数丢失的问题，

    console.log(id) //undefined

解决

页面一

   this.id = 666sessionStorage.setItem('id',this.id )this.$router.push({name: '页面二',params: {id: this.id}})

页面二

     let id = this.$route.params.id!=undefined ? this.$route.params.id :  sessionStorage.getItem('id')console.log(id) //666

query参数

     let obj={id:666,Ma:{name:'小马'}}this.$router.push({path:"/Echartss",query:obj})

在页面二

    console.log(this.$route.query.id,'this.$route.query.id') //666console.log(this.$route.query.Ma,'this.$route.query.Ma') //{name:'小马'}

刷新页面后

    console.log(this.$route.query.id,'this.$route.query.id') //666console.log(this.$route.query.Ma,'this.$route.query.Ma')//[object Object]

就获取不到name的值

解决

页面一

     let obj = {id: 666,Ma: {name: "小马"}};sessionStorage.setItem("obj", JSON.stringify(obj));this.$router.push({path:"/Echartss",query:obj})

页面二

    let id = this.$route.query.id!=undefined ? this.$route.query.id :  JSON.parse(sessionStorage.getItem('obj')).idlet Ma = this.$route.query.Ma.name!=undefined ? this.$route.query.Ma :  JSON.parse(sessionStorage.getItem('obj')).Maconsole.log(id) //666console.log(Ma) //{name:"小马"}

通过JSON将对象变成json字符串再格式化的方法解决

Vue路由params、query参数丢失解决相关推荐

路由的query参数
文章目录 Message组件发送query参数 Detail组件接收query参数本例基于路由的基本使用.嵌套路由的实现. 项目目录如下: 一般组件components/Banner.vue &l ...
vue 路由地址不跳转解决办法
这里写自定义** vue 路由地址不跳转解决办法这是我的报错原因,因为我是一个后端开发对vue不了解我的报错原因是因为: menu.json 中的路径 path:****** name***** ...
vue路由传参刷新丢失
没有系统学习过vue,以前使用路由传参都是直接this.$router.push({name:'main',params:{'id': 123}})的,没有在路由定义中配置参数,如下: 复制代码 ro ...
vue中params和query的区别，以及具体用法
query传递参数会在url后面用?连接起来,且参数之间用&&符号连接然后显示在页面的url中:params传递参数不会显示在页面中:query有点像ajax中的get请求,而para ...
【Vue路由】多级路由、路由传参、命名路由、params使用
文章目录多级路由案例实验总结路由传参案例实验总结命名路由路由的params参数多级路由案例实验我们尝试做出如下的效果: 首先项目结构: 我们直接看四个路由组件: About.vu ...
Vue路由和React路由
Vue路由注意:随着版本更新,vue版本需要对应合适的vue-router版本才能正常工作,比如这里当我安装vue-router时, npm install vue-router 它默认安装的版本是 ...
Vue2基础、组件化编程、脚手架、Vuex、Vue路由、UI组件库
尚硅谷张天禹老师讲课学习视频 1.Vue简介 Vue2中文官网 1.1 Vue 介绍一套用于构建用户界面的渐进式JavaScript框架构建用户界面:把数据通过某种办法变成用户界面渐进式:可以 ...
Vue 路由参数传递
文章目录路由的query参数命名路由路由的params参数 props配置第三种写法上一节:Vue 路由的基本使用路由的query参数先看效果我们需要创建一个 Detail.vue 组 ...
路由的props参数
文章目录 props值是一个对象 props值是一个布尔值 props值是一个函数通过props接收params参数通过props接收query参数使用props参数,可以更方便的给路由组件传递 ...

Vue路由params、query参数丢失解决

params参数

query参数

Vue路由params、query参数丢失解决相关推荐

最新文章

热门文章