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 表单输入框不支持focus及blur事件的解决方案
Nov 17 Vue.js
详解Vue 的异常处理机制
Nov 30 Vue.js
vue 中this.$set 动态绑定数据的案例讲解
Jan 29 Vue.js
vue登录页实现使用cookie记住7天密码功能的方法
Feb 18 Vue.js
vue常用高阶函数及综合实例
Feb 25 Vue.js
vue实现无缝轮播效果(跑马灯)
May 14 Vue.js
vue中使用mockjs配置和使用方式
Apr 06 Vue.js
vue中控制mock在开发环境使用,在生产环境禁用方式
Apr 06 Vue.js
vue实现拖拽交换位置
Apr 07 Vue.js
vue中this.$http.post()跨域和请求参数丢失的解决
Apr 08 Vue.js
ant design vue的form表单取值方法
Jun 01 Vue.js
vue实现input输入模糊查询的三种方式
Aug 14 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学习之PHP运算符
2006/10/09 PHP
那些年一起学习的PHP(一)
2012/03/21 PHP
php获得客户端浏览器名称及版本的方法(基于ECShop函数)
2015/12/23 PHP
php实现文件上传及头像预览功能
2017/01/15 PHP
PHP实现的二分查找算法实例分析
2017/12/19 PHP
PHP获取二叉树镜像的方法
2018/01/17 PHP
PHP设计模式之单例模式定义与用法分析
2019/03/26 PHP
自适应图片大小的弹出窗口
2006/07/27 Javascript
jQuery live( type, fn ) 委派事件实现
2009/10/11 Javascript
javascript 面向对象全新理练之原型继承
2009/12/03 Javascript
Javascript下IE与Firefox下的差异兼容写法总结
2010/06/18 Javascript
Javascript this 的一些学习总结
2012/08/02 Javascript
jQuery+PHP打造滑动开关效果
2014/12/16 Javascript
在 Express 中使用模板引擎
2015/12/10 Javascript
js实现楼层效果的简单实例
2016/07/15 Javascript
AngularJS入门教程之Helloworld示例
2016/12/25 Javascript
python引用DLL文件的方法
2015/05/11 Python
浅谈pandas中DataFrame关于显示值省略的解决方法
2018/04/08 Python
PyTorch上实现卷积神经网络CNN的方法
2018/04/28 Python
python sys.argv[]用法实例详解
2018/05/25 Python
python腾讯语音合成实现过程解析
2019/08/01 Python
Python drop方法删除列之inplace参数实例
2020/06/27 Python
pycharm 配置svn的图文教程(手把手教你)
2021/01/15 Python
意大利拉斐尔时尚购物网:Raffaello Network(支持中文)
2018/11/09 全球购物
加拿大在线隐形眼镜和眼镜店:VisionPros
2019/10/06 全球购物
怀旧香味蜡烛:Homesick
2019/11/02 全球购物
Hashtable 添加内容的方式有哪几种,有什么区别?
2012/04/08 面试题
简述安装Slackware Linux系统的过程
2012/01/12 面试题
学校政风行风整改方案
2014/10/25 职场文书
2014年生活老师工作总结
2014/12/23 职场文书
2015年青年志愿者工作总结
2015/05/20 职场文书
简历中的自我评价怎么写呢?
2019/04/30 职场文书
加薪申请书应该这样写!
2019/07/04 职场文书
Python实现机器学习算法的分类
2021/06/03 Python
Django路由层如何获取正确的url
2021/07/15 Python
一文搞懂PHP中的抽象类和接口
2022/05/25 PHP