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
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
