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

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