Vue Router 页面间传递参数

params

跳转到posts页面，携带postId参数。

this.$router.push({ 
    name: 'posts', 
    params: { 
        postId: 123 
    }
})

posts页面，接收postId参数。

<div>
    params from other: {{this.$route.params.postId}}
</div>

页面路径

http://localhost/posts

query

跳转到posts页面，携带postId参数。

this.$router.push({ 
    path: 'posts', 
    query: { 
        postId: 123 
    }
})

posts页面，接收postId参数。

<div>
    query from other: {{this.$route.query.postId}}
</div>

页面路径

http://localhost/posts?postId=123

区别

使用params方式传递参数，页面刷新后将获取不到参数的值。而使用query方式传递参数则不受刷新影响，一直可以获取参数的值。