SoFunction
Updated on 2025-04-05

Vue router passes parameters and solves the problem of missing parameters for refresh pages

Vue Router parameter transmission method:

1. this.$({ name: 'module name', params: { // Each parameter } })

：

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

：

<!-- html -->
<button @click="paramsMode(testData)">paramsTransfer the ginseng</button>

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

：

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

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

Effect:
url：http://localhost:8081/#/paramsPassingByRouter/paramsMode
Page display: {"id":"20180101","name":"Zhang San","aka":"z3","age":"18"}

However, after refreshing the page, the data will be lost and it will be displayed: {}.

2. this.$({ name: 'module name', query: { // Each parameter } })

：

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

：

&lt;!-- html --&gt;
&lt;button @click="queryMode(testData)"&gt;queryTransfer the ginseng&lt;/button&gt;

&lt;!-- js --&gt;
&lt;script&gt;
export default {
 data () {
  return {
   testData: {
    id: '20180101',
    name: 'Zhang San',
    aka: 'z3',
    age: '18'
   }
  }
 },
 methods: {
  queryMode (data) {
   this.$({
    name: 'paramsMode',
    query: data
   })
  }
 }
}
&lt;/script&gt;

：

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

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

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

After refreshing the page, data will not be lost.

Solutions to solve the loss of data in refresh pages:

Pass parameters using this.$({ name: 'module name', query: { // Each parameter } }) method.

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

this.$({ name: 'module name', params: { // Each parameter } }) When setting the routing file, spell the parameters into the url.

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

1 and 2 are used in combination: this.$({ name: 'module name', params: { // Each parameter }, query: { // Each parameter } }).

Honestly use localStorage to store.

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 the url, and refresh parameters will not be lost.
Clear the content stored in localStorage when destroying the page.

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

&lt;!--  Revise --&gt;
&lt;script&gt;
export default {
 data () {
  return {
   testData: {}
  }
 },
 created () {
  const tempData = ('tempData')
  if (tempData) {
    = (tempData)
  } else {
    = this.$

   ('tempData', (this.$))
  }
 },
 beforeDestroy () {
  ('tempData')
 }
}
&lt;/script&gt;

This is the article about Vue router passing parameters and solving the problem of missing parameters for refresh pages. For more related content for Vue router passing parameters, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!