Vue router Pass Parameters and Resolve Refresh Page Parameter Missing Problem

Vue Router parameter transmission mode:

1. this. $router. push ({name: 'Module Name', params: {//Parameters}})

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 Reference transmission </button>

<!-- js -->
<script>
export default {
 data () {
  return {
   testData: {
    id: '20180101',
    name: ' Zhang 3',
    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>

Effect:
url: http://localhost: 8081/#/paramsPassingByRouter/paramsMode
The page shows: {"id": "20180101", "name": "Zhang 3", "aka": "z3", "age": "18"}

However, after refreshing the page, the data will be lost, showing: {}.

2. this. $router. push ({name: 'Module Name', query: {//Parameters}})

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 Reference transmission </button>

<!-- js -->
<script>
export default {
 data () {
  return {
   testData: {
    id: '20180101',
    name: ' Zhang 3',
    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>

Effect:
url: http://localhost: 8081/#/paramsPassingByRouter/queryMode? id=20180101 & name=%E5%BC%A0%E4%B8%89 & aka=z3 & age=18
The page shows: {"id": "20180101", "name": "Zhang 3", "aka": "z3", "age": "18"}

After refreshing the page, the data will not be lost.

Solution to data loss of refresh page:

Parameters are passed using this. $router. push ({name: 'Module Name', query: {//Parameters}}).

Disadvantages: Parameter values are spliced on url, url will be very long and can be seen at the same time.

this. $router. push ({name: 'Module Name', params: {//Parameters}}) Spell the parameters into url when setting the routing file.

url: http://localhost: 8081/#/paramsPassingByRouter/paramsMode/20180101/% E5% BC% A0% E4% B8% 89/z3/18
Disadvantages: Same as above.

1 and 2 in combination: this. $router. push ({name: 'Module Name', params: {//Parameters}, query: {//Parameters}}).

Honestly store with localStorage.

url: http://localhost:8081/#/paramsPassingByRouter/paramsMode/z3
It can be used in conjunction with params and query modes, and the exposed parameters are displayed on url without losing the refresh parameters.
Clear the contents stored in localStorage when destroying pages.

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

<!-- ParamsMode.vue  Modify  -->
<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>