Vue router傳遞參數(shù)并解決刷新頁(yè)面參數(shù)丟失問(wèn)題

更新時(shí)間：2020年12月02日 11:00:03 作者：月半圓兒丨TED

這篇文章主要介紹了Vue router傳遞參數(shù)并解決刷新頁(yè)面參數(shù)丟失問(wèn)題，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

Vue Router 傳參方式：

1. this.$router.push({ name: '模塊名稱(chēng)', params: { // 各參數(shù) } })

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
頁(yè)面顯示：{"id":"20180101","name":"張三","aka":"z3","age":"18"}

但是刷新頁(yè)面后，數(shù)據(jù)會(huì)丟失，顯示：{}。

2. this.$router.push({ name: '模塊名稱(chēng)', query: { // 各參數(shù) } })

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
頁(yè)面顯示：{"id":"20180101","name":"張三","aka":"z3","age":"18"}

刷新頁(yè)面后，數(shù)據(jù)不會(huì)丟失。

解決刷新頁(yè)面數(shù)據(jù)丟失的方案：

使用 this.$router.push({ name: '模塊名稱(chēng)', query: { // 各參數(shù) } }) 方式傳參。

缺點(diǎn)：參數(shù)值都拼接在 url 上，url 會(huì)很長(zhǎng)，同時(shí)都可被看到。

this.$router.push({ name: '模塊名稱(chēng)', params: { // 各參數(shù) } }) 路由文件設(shè)置的時(shí)候把參數(shù)拼到 url 里。

url：http://localhost:8081/#/paramsPassingByRouter/paramsMode/20180101/%E5%BC%A0%E4%B8%89/z3/18
缺點(diǎn)：同上。

1 和 2 結(jié)合使用：this.$router.push({ name: '模塊名稱(chēng)', params: { // 各參數(shù) }, query: { // 各參數(shù) } })。

老老實(shí)實(shí)的用 localStorage 存儲(chǔ)。

url: http://localhost:8081/#/paramsPassingByRouter/paramsMode/z3
可以與 params 和 query 方式配合使用，可以暴露的參數(shù)顯示在 url 上，同時(shí)刷新參數(shù)也不會(huì)丟失。
銷(xiāo)毀頁(yè)面的時(shí)候把 localStorage 存儲(chǔ)的內(nèi)容清除。

// 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>

到此這篇關(guān)于Vue router傳遞參數(shù)并解決刷新頁(yè)面參數(shù)丟失問(wèn)題的文章就介紹到這了,更多相關(guān)Vue router傳遞參數(shù)丟失內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: