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 在单页面应用里使用二级套嵌路由
Dec 19 Vue.js
vue el-upload上传文件的示例代码
Dec 21 Vue.js
vue中使用echarts的示例
Jan 03 Vue.js
vue实现一个获取按键展示快捷键效果的Input组件
Jan 13 Vue.js
vue浏览器返回监听的具体步骤
Feb 03 Vue.js
vue项目两种方式实现竖向表格的思路分析
Apr 28 Vue.js
Vue详细的入门笔记
May 10 Vue.js
HTML+VUE分页实现炫酷物联网大屏功能
May 27 Vue.js
vue+echarts实现多条折线图
Mar 21 Vue.js
vue3引入highlight.js进行代码高亮的方法实例
Apr 08 Vue.js
解决vue中provide inject的响应式监听
Apr 19 Vue.js
Vue router配置与使用分析讲解
Dec 24 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
随机头像PHP版
2006/10/09 PHP
色色整理的PHP面试题集锦
2012/03/08 PHP
基于PHP CURL用法的深入分析
2013/06/09 PHP
PHP使用第三方即时获取物流动态实例详解
2017/04/27 PHP
js中split函数的使用方法说明
2013/12/26 Javascript
调用innerHTML之后onclick失效问题的解决方法
2014/01/28 Javascript
jquery.form.js实现将form提交转为ajax方式提交的方法
2015/04/07 Javascript
js实现消息滚动效果
2017/01/18 Javascript
一种angular的方法级的缓存注解(装饰器)
2018/03/13 Javascript
浅谈vue 单文件探索
2018/09/05 Javascript
Python 专题三 字符串的基础知识
2017/03/19 Python
Python中read()、readline()和readlines()三者间的区别和用法
2017/07/30 Python
python判断数字是否是超级素数幂
2018/09/27 Python
对python产生随机的二维数组实例详解
2018/12/13 Python
matplotlib实现区域颜色填充
2019/03/18 Python
python实现Dijkstra算法的最短路径问题
2019/06/21 Python
python装饰器常见使用方法分析
2019/06/26 Python
python适合人工智能的理由和优势
2019/06/28 Python
python实现输入任意一个大写字母生成金字塔的示例
2019/10/27 Python
如何关掉pycharm中的python console(图解)
2019/10/31 Python
深度学习入门之Pytorch 数据增强的实现
2020/02/26 Python
Python pandas 列转行操作详解(类似hive中explode方法)
2020/05/18 Python
Python绘图实现台风路径可视化代码实例
2020/10/23 Python
HTML5 实现一个访问本地文件的实例
2012/12/13 HTML / CSS
受外贸欢迎的美国主机:BlueHost
2017/05/16 全球购物
自荐信不宜过于夸大
2013/11/06 职场文书
幼儿园中班下学期评语
2014/04/18 职场文书
供电工程专业求职信
2014/08/09 职场文书
项目合作意向书
2015/05/08 职场文书
入党积极分子党支部意见
2015/06/02 职场文书
2016年入党心得体会范文
2016/01/23 职场文书
建房合同协议书
2016/03/21 职场文书
导游词之千岛湖
2019/09/23 职场文书
python将图片转为矢量图的方法步骤
2021/03/30 Python
Java基础-封装和继承
2021/07/02 Java/Android
Redisson实现Redis分布式锁的几种方式
2021/08/07 Redis