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

编程学习 2021-07-04 14:07www.dzhlxh.cn编程入门
这篇文章主要介绍了Vue router传递参数并解决刷新页面参数丢失问题,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们狼蚁网站SEO优化随着长沙网络推广来一起学习学习吧

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:
页面显示:{"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传递参数丢失内容请搜索狼蚁SEO以前的文章或继续浏览狼蚁网站SEO优化的相关文章希望大家以后多多支持狼蚁SEO!

Copyright © 2016-2025 www.dzhlxh.cn 金源码 版权所有 Power by

网站模板下载|网络推广|微博营销|seo优化|视频营销|网络营销|微信营销|网站建设|织梦模板|小程序模板