vue路由传参，刷新页面不丢失参数

1.使用params传参

通过配置name传参，name是你要跳转的路由名字

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

在content页面，使用params获取

created () {
    this.articleId = this.$route.params.id
}

在router路由配置中，在content后面必须配置id，否则刷新页面，获取不到id值，但是id值会暴露在网址中。

{
   path: 'content/:id',
   name: 'content',
   component: resolve => require(['@/components/Content'], resolve)
 }

2.通过query传参

2.1通过配置path传参，传id值

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

在content页面，使用query获取，但是会显示成content？id=id的格式，会暴露id值

created () {
    this.articleId = this.$route.query.id
}

router路由配置

{
   path: 'content',
   name: 'content',
   component: resolve => require(['@/components/Content'], resolve)
 }

2.2传递对象

this.$router.push({ 
    path: '/content', 
    query: {
     article: article
    } 
})

在content页面，使用query获取对象，但在网址中会显示成/content/article=[object Object]。query里的每一项值应该是字符串，如果传一个对象进去会被强制转成[object Object]。点击进入路由可以获取对象值，但是刷新页面会导致获取不到对象值。

created () {
    this.article = this.$route.query.article
}

router路由配置

{
   path: 'content',
   name: 'content',
   component: resolve => require(['@/components/Content'], resolve)
 }