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(https://router.vuejs.org/zh/)

學習從來不是一個人的事情，要有個相互監督的伙伴，想要學習或交流前端問題的小伙伴可以私信“學習”小明加群獲取2019web前端最新入門資料，一起學習，一起成長！

總結

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

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