1. 使用name和params組合傳參

this.$router.push({name: 'details', params: {'id': 233}}) 復(fù)制代碼

路由配置

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

獲取參數(shù)

this.$route.params.id // 233 復(fù)制代碼

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

this.$route.params.id // undefined 復(fù)制代碼

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

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

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

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

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

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

2. path和query組合傳參

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

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

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

官方文檔 vue-router

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。