詳解新手使用vue-router傳參時注意事項

更新時間：2019年06月06日 11:18:51 作者：JoySang

這篇文章主要介紹了詳解新手使用vue-router傳參時注意事項，詳細(xì)的介紹了幾種常見錯誤，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

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)是沒有問題的，參數(shù)也可以傳過去，但是刷新頁面后，參數(shù)就沒了 (ps: 這個地方其實還有一個問題，當(dāng)你傳遞的參數(shù)是number類型，第一次是沒有問題的，獲取的時候也是number類型，但是當(dāng)你刷新頁面后，number變成string類型，如果涉及計算的建議先類型轉(zhuǎn)換一下)

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

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

刷新頁面后直接字符串拼接了 // 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ù)會跟在問號后面例如：/details?id=666，該方法刷新頁面不會丟失參數(shù)

最后：根據(jù)自己的項目選擇合適的傳參方式

官方文檔vue-router

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

Vue keep-alive組件的使用及如何清除緩存
本文介紹了Vue keep-alive組件的使用及如何清除緩存,給大家分享清除緩存的幾種方法,結(jié)合實例代碼給大家講解的非常詳細(xì),需要的朋友跟隨小編一起看看吧
2023-10-10
Vue實現(xiàn)Chrome小恐龍游戲的示例代碼
Google 給 Chrome 瀏覽器加了一個有趣的彩蛋，本文就詳細(xì)的介紹一下Vue實現(xiàn)Chrome小恐龍游戲的示例代碼，具有一定的參考價值，感興趣的可以了解一下
2022-04-04
vue實現(xiàn)通訊錄功能
這篇文章主要為大家詳細(xì)介紹了vue實現(xiàn)通訊錄功能，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2018-07-07
關(guān)于TypeScript的踩坑記錄
這篇文章主要介紹了關(guān)于TypeScript的踩坑記錄，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-09-09
使用element-ui,el-row中的el-col數(shù)據(jù)為空頁面布局變亂問題
這篇文章主要介紹了使用element-ui,el-row中的el-col數(shù)據(jù)為空頁面布局變亂問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
2024-08-08
vue3+elementUI實現(xiàn)懸浮多行文本輸入框效果
這篇文章主要為大家詳細(xì)介紹了vue3如何引用elementUI實現(xiàn)懸浮文本輸入框效果,以便實現(xiàn)多行文本輸入,感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下
2023-10-10
Vue 創(chuàng)建組件的兩種方法小結(jié)(必看)
Vue 創(chuàng)建組件的方法有哪些呢？下面小編就為大家分享一篇Vue 創(chuàng)建組件的兩種方法小結(jié)，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2018-02-02
VUE中的export default和export使用方法解析
export default和export都能導(dǎo)出一個模塊里面的常量，函數(shù)，文件，模塊等，在其它文件或模塊中通過import來導(dǎo)入常量，函數(shù)，文件或模塊。但是，在一個文件或模塊中export,import可以有多個，export default卻只能有一個。
2022-12-12
vue實現(xiàn)日歷組件
這篇文章主要為大家詳細(xì)介紹了vue實現(xiàn)日歷組件，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2022-04-04
vue.js 實現(xiàn)點擊按鈕動態(tài)添加li的方法
今天小編就為大家分享一篇vue.js 實現(xiàn)點擊按鈕動態(tài)添加li的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2018-09-09