使用vue-router進(jìn)行傳參時(shí)需要注意哪些事項(xiàng)

使用vue-router進(jìn)行傳參時(shí)需要注意哪些事項(xiàng)？相信很多沒(méi)有經(jīng)驗(yàn)的人對(duì)此束手無(wú)策，為此本文總結(jié)了問(wèn)題出現(xiàn)的原因和解決方法，通過(guò)這篇文章希望你能解決這個(gè)問(wèn)題。

1. 使用name和params組合傳參

this.$router.push({name: 'details', params: {'id': 233}})

路由配置

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

export default new Router({
  mode: 'history',
  routes: [
    {
      path: '/details',
      name: 'details',
      component: resolve => require(['../components/details'], resolve)
    }
  ]
})

獲取參數(shù)

this.$route.params.id // 233

刷新參數(shù)丟失 顯示 undefined

this.$route.params.id // undefined

注意：此方法第一次跳轉(zhuǎn)是沒(méi)有問(wèn)題的，參數(shù)也可以傳過(guò)去，但是刷新頁(yè)面后，參數(shù)就沒(méi)了 (ps: 這個(gè)地方其實(shí)還有一個(gè)問(wèn)題，當(dāng)你傳遞的參數(shù)是number類型，第一次是沒(méi)有問(wèn)題的，獲取的時(shí)候也是number類型，但是當(dāng)你刷新頁(yè)面后，number變成string類型，如果涉及計(jì)算的建議先類型轉(zhuǎn)換一下)

第一次是預(yù)期結(jié)果 // 234

console.log(this.$route.params.id + 1)

刷新頁(yè)面后直接字符串拼接了 // 2331

參數(shù)丟失解決方案：

routes: [
    {
      path: '/details/:id', // 這里配置的要和你傳遞的參數(shù)名保持一致
      name: 'details',
      component: resolve => require(['../components/details'], resolve)
    }
  ]

2. path和query組合傳參

this.$router.push({path: '/details', query: {id: 666}})

this.$route.query.id // 666

此方法參數(shù)會(huì)跟在問(wèn)號(hào)后面 例如：/details?id=666，該方法刷新頁(yè)面不會(huì)丟失參數(shù)

看完上述內(nèi)容，你們掌握使用vue-router進(jìn)行傳參時(shí)需要注意哪些事項(xiàng)的方法了嗎？如果還想學(xué)到更多技能或想了解更多相關(guān)內(nèi)容，歡迎關(guān)注億速云行業(yè)資訊頻道，感謝各位的閱讀！