Vue router传递参数并解决刷新页面参数丢失问题


Posted in Vue.js onDecember 02, 2020

Vue Router 传参方式:

1. this.$router.push({ name: '模块名称', params: { // 各参数 } })

router.js:

export default new Router({
 routes: [
  {
   path: '/paramsPassingByRouter',
   component: ParamsPassingByRouter,
   children: [
    {
     path: 'paramsMode',
     name: 'paramsMode',
     component: ParamsMode
    }
   ]
  }
 ]
})

ParamsPassingByRouter.vue:

<!-- html -->
<button @click="paramsMode(testData)">params传参</button>

<!-- js -->
<script>
export default {
 data () {
  return {
   testData: {
    id: '20180101',
    name: '张三',
    aka: 'z3',
    age: '18'
   }
  }
 },
 methods: {
  paramsMode (data) {
   this.$router.push({
    name: 'paramsMode',
    params: data
   })
  }
 }
}
</script>

ParamsMode.vue:

<!-- html -->
<div class="params-mode">{{ testData }}</div>

<!-- js -->
<script>
export default {
 data () {
  return {
   testData: {}
  }
 },
 created () {
  this.testData = this.$route.params
 }
}
</script>

效果:
url:http://localhost:8081/#/paramsPassingByRouter/paramsMode
页面显示:{"id":"20180101","name":"张三","aka":"z3","age":"18"}

但是刷新页面后,数据会丢失,显示:{}。

2. this.$router.push({ name: '模块名称', query: { // 各参数 } })

router.js:

export default new Router({
 routes: [
  {
   path: '/paramsPassingByRouter',
   component: ParamsPassingByRouter,
   children: [
    {
     path: 'queryMode',
     name: 'queryMode',
     component: QueryMode
    }
   ]
  }
 ]
})

ParamsPassingByRouter.vue:

<!-- html -->
<button @click="queryMode(testData)">query传参</button>

<!-- js -->
<script>
export default {
 data () {
  return {
   testData: {
    id: '20180101',
    name: '张三',
    aka: 'z3',
    age: '18'
   }
  }
 },
 methods: {
  queryMode (data) {
   this.$router.push({
    name: 'paramsMode',
    query: data
   })
  }
 }
}
</script>

QueryMode.vue:

<!-- html -->
<div class="query-mode">{{ testData }}</div>

<!-- js -->
<script>
export default {
 data () {
  return {
   testData: {}
  }
 },
 created () {
  this.testData = this.$route.query
 }
}
</script>

效果:
url:http://localhost:8081/#/paramsPassingByRouter/queryMode?id=20180101&name=%E5%BC%A0%E4%B8%89&aka=z3&age=18
页面显示:{"id":"20180101","name":"张三","aka":"z3","age":"18"}

刷新页面后,数据不会丢失。

解决刷新页面数据丢失的方案:

使用 this.$router.push({ name: '模块名称', query: { // 各参数 } }) 方式传参。

缺点:参数值都拼接在 url 上,url 会很长,同时都可被看到。

this.$router.push({ name: '模块名称', params: { // 各参数 } }) 路由文件设置的时候把参数拼到 url 里。

url:http://localhost:8081/#/paramsPassingByRouter/paramsMode/20180101/%E5%BC%A0%E4%B8%89/z3/18
缺点:同上。

1 和 2 结合使用:this.$router.push({ name: '模块名称', params: { // 各参数 }, query: { // 各参数 } })。

老老实实的用 localStorage 存储。

url: http://localhost:8081/#/paramsPassingByRouter/paramsMode/z3
可以与 params 和 query 方式配合使用,可以暴露的参数显示在 url 上,同时刷新参数也不会丢失。
销毁页面的时候把 localStorage 存储的内容清除。

// router.js
{
 path: 'paramsMode/:aka',
 name: 'paramsMode',
 component: ParamsMode
}

<!-- ParamsMode.vue 修改 -->
<script>
export default {
 data () {
  return {
   testData: {}
  }
 },
 created () {
  const tempData = localStorage.getItem('tempData')
  if (tempData) {
   this.testData = JSON.parse(tempData)
  } else {
   this.testData = this.$route.params

   localStorage.setItem('tempData', JSON.stringify(this.$route.params))
  }
 },
 beforeDestroy () {
  localStorage.removeItem('tempData')
 }
}
</script>

到此这篇关于Vue router传递参数并解决刷新页面参数丢失问题的文章就介绍到这了,更多相关Vue router传递参数丢失内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Vue.js 相关文章推荐
Vue $attrs &amp; inheritAttr实现button禁用效果案例
Dec 07 Vue.js
Vue中computed和watch有哪些区别
Dec 19 Vue.js
vue+openlayers绘制省市边界线
Dec 24 Vue.js
Vue实现省市区三级联动
Dec 27 Vue.js
通过vue.extend实现消息提示弹框的方法记录
Jan 07 Vue.js
Vue实现摇一摇功能(兼容ios13.3以上)
Jan 26 Vue.js
如何使用RoughViz可视化Vue.js中的草绘图表
Jan 30 Vue.js
Vue中避免滥用this去读取data中数据
Mar 02 Vue.js
如何使用vue3打造一个物料库
May 08 Vue.js
Vue3.0写自定义指令的简单步骤记录
Jun 27 Vue.js
分享一个vue实现的记事本功能案例
Apr 11 Vue.js
vue实现省市区联动 element-china-area-data插件
Apr 22 Vue.js
详解Vue3 Teleport 的实践及原理
Dec 02 #Vue.js
vue $router和$route的区别详解
Dec 02 #Vue.js
基于vue项目设置resolves.alias: '@'路径并适配webstorm
Dec 02 #Vue.js
element-plus一个vue3.xUI框架(element-ui的3.x 版初体验)
Dec 02 #Vue.js
vue组件中节流函数的失效的原因和解决方法
Dec 02 #Vue.js
Vue3+elementui plus创建项目的方法
Dec 01 #Vue.js
Vue.js桌面端自定义滚动条组件之美化滚动条VScroll
Dec 01 #Vue.js
You might like
基于Laravel5.4实现多字段登录功能方法示例
2017/08/11 PHP
PHP实现 APP端微信支付功能
2018/06/22 PHP
laravel 使用事件系统统计浏览量的实现
2019/10/16 PHP
设定php简写功能的方法
2019/11/28 PHP
Javascript学习笔记二 之 变量
2010/12/15 Javascript
js 图片随机不定向浮动的实现代码
2013/07/02 Javascript
使用indexOf等在JavaScript的数组中进行元素查找和替换
2013/09/18 Javascript
分享一则javascript 调试技巧
2015/01/02 Javascript
jquery中animate的stop()方法作用实例分析
2015/01/30 Javascript
简介JavaScript中的push()方法的使用
2015/06/09 Javascript
javascript+HTML5的canvas实现七夕情人节3D玫瑰花效果代码
2015/08/04 Javascript
如何利用JS通过身份证号获取当事人的生日、年龄、性别
2016/01/22 Javascript
Bootstrap每天必学之轮播(Carousel)插件
2016/04/25 Javascript
Nodejs 获取时间加手机标识的32位标识实现代码
2017/03/07 NodeJs
用户管理的设计_jquery的ajax实现二级联动效果
2017/07/13 jQuery
JS实现的ajax和同源策略(实例讲解)
2017/12/01 Javascript
javaScript动态添加Li元素的实例
2018/02/24 Javascript
Angular CLI在Angular项目中如何使用scss详解
2018/04/10 Javascript
Electron vue的使用教程图文详解
2019/07/05 Javascript
webpack+vue.js构建前端工程化的详细教程
2020/05/10 Javascript
[00:15]天涯墨客终极技能展示
2018/08/25 DOTA
python 的列表遍历删除实现代码
2020/04/12 Python
Python脚本完成post接口测试的实例
2018/12/17 Python
python中for循环变量作用域及用法详解
2019/11/05 Python
python3实现绘制二维点图
2019/12/04 Python
解决django接口无法通过ip进行访问的问题
2020/03/27 Python
2013年研究生毕业感言
2014/02/06 职场文书
法院授权委托书范文
2014/08/02 职场文书
2014年社区民政工作总结
2014/12/02 职场文书
扬州个园导游词
2015/02/06 职场文书
文员岗位职责范本
2015/04/16 职场文书
团支部书记竞选稿
2015/11/21 职场文书
sqlserver2017共享功能目录路径不可改的解决方法
2021/04/16 SQL Server
vue3中provide && inject的使用
2021/07/01 Vue.js
详解SQL的窗口函数
2022/04/21 Oracle
kubernetes集群搭建Zabbix监控平台的详细过程
2022/07/07 Servers