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'携带参数跳转,刷新页面参数不会消失,但是参数会在地址栏显示