vue路由跳轉攜帶的參數,刷新頁面消失的問題及解決

在此之前,我沒有在意路由跳轉攜帶參數,如果刷新頁面參數會消失導致報錯的問題,經此次遇到,才仔細的研究了vue路由傳參的秘密 在項目中,我們通常希望在某個事件里跳轉路由,並攜帶參數, 官方文檔里把這叫做編程式導航(https://router.vuejs.org/zh/guide/essentials/navigation.html)

編程式導航中路由跳轉的兩個寫法

• 1.通過 我們定義的router的'name'

this.$router.push({
    name: 'goods'
})

• 2.通過 我們定義的router的'path'

this.$router.push({
    path: '/goods'
})

攜帶參數

• 1.使用'name'

this.$router.push({
    name: 'goods',
    params: {
        id: 1
    }
})

• 2.使用'path'

this.$router.push({
    path: '/goods',
    query: {
        id: 1
    }
})

• 3.注意,這里使用的把參數包裹起來的對象名字是死的,使用name必須是params,使用path必須是query

兩者不同點

• 使用'name'攜帶參數跳轉,參數不會在地址欄顯示,但是刷新頁面會造成參數消失或頁面空白
• 使用'path'攜帶參數跳轉,刷新頁面參數不會消失,但是參數會在地址欄顯示