路由动态传参

 

从列表页跳到编辑页时，经常需要传参。我比较常用的有下面两种：

一、刷新后失效

路由定义：

{
    path: '/test',
    name: 'test',
    component: () => import('../views/Test.vue'),
    meta: {title:'', breadNumber: 1}
  }

路由跳转：

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

组件中取参：

this.$route.params.id

以上这种方式，不会把id暴露在url中。但是，刷新页面后就取不到这个id了。

二、刷新后不失效

1.路由定义中带动态参数

路由定义：

{    
    path: '/test/:id',
    name: 'test',
    component: () => import('../views/Test.vue'),
    meta: {title:'', breadNumber: 1},
    props: true
}

路由跳转：

            this.$router.push({
                // name: 'test',
                // params: { 
                //     id: this.id
                // }
                path: `/test/${this.id}`
            })

Test.vue组件中取参：

this.$route.params.id

或者

this.id (这是因为在路由定义时设置了props:true)

以上这种方式会有个问题，当路由跳转时，如果this.id取不到值，跳不到/test下。解决办法是，在定义路由时，增加如下路由定义：

{    
    path: '/test/:id',
    name: 'test',
    component: () => import('../views/Test.vue'),
    meta: {title:'', breadNumber: 1},
    props: true
},
{   //这部分是新增的
    path: '/test',
    name: 'test',
    component: () => import('../views/Test.vue'),
    meta: {title:'', breadNumber: 1},
    props: true
}

（这种方法感觉代码太重复，但是我目前没找到更好的办法。如果您有更好的办法，请告知，谢谢！）

2.路由定义中不带参数，路由跳转后 url 会带 "?id=xxx"

路由定义：

{    
    path: '/test',
    name: 'test',
    component: () => import('../views/Test.vue'),
    meta: {title:'', breadNumber: 1}
}

路由跳转：

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

组件取参：

this.$route.query.id