Vue 列表页带参数进详情页

1、用params传参

列表页：

<!-- 注意：用params传参这里是命名路由，用name -->

<router-link :to="{name; 'msgDetail', params: {id: item.msg_id}}"> 
    
</router-link>

路由配置如下：

new Router({
    routes: [
        {
            path: '/msgDetail/:id',
            name: 'msgDetail',
            component: msgDetail
        }
    ]
})

详情页接收：

// 注意：这里是$route，不是$router
this.$route.params.id

2、用query传参

列表页：

<!-- 注意：用query传参这里是带查询参数，用path -->

<router-link :to="{path: '/msgDetail', query: {id: item.msg_id}}">

</router-link>

路由配置如下：

new Router({
    routes:[
        {
            path: '/msgDetail',
            name: 'msgDetail',
            component: msgDetail
        }
    ]
})

详情页接收参数：

// 注意：这里是$route，而不是$router
this.$route.query.id