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)}] }) 復制代碼

獲取參數

this.$route.params.id // 233 復制代碼

刷新參數丟失 顯示 undefined

this.$route.params.id // undefined 復制代碼

注意：此方法第一次跳轉是沒有問題的，參數也可以傳過去，但是刷新頁面后，參數就沒了 (ps: 這個地方其實還有一個問題，當你傳遞的參數是number類型，第一次是沒有問題的，獲取的時候也是number類型，但是當你刷新頁面后，number變成string類型，如果涉及計算的建議先類型轉換一下)

第一次是預期結果 // 234

console.log(this.$route.params.id + 1) 復制代碼

刷新頁面后直接字符串拼接了 // 2331

參數丟失解決方案：

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

2. path和query組合傳參

this.$router.push({path: '/details', query: {id: 666}}) 復制代碼this.$route.query.id // 666 復制代碼

此方法參數會跟在問號后面 例如：/details?id=666，該方法刷新頁面不會丟失參數

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

官方文檔 vue-router

總結

以上是生活随笔為你收集整理的新手使用vue-router传参时注意事项的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。