vue-router路由传参的几种方式-案例

JackieDYH

于 2021-08-25 12:35:52 发布

阅读量4.3k

点赞数 6

CC 4.0 BY-SA版权

分类专栏： Vue 编码小技巧文章标签： route router 路由传参 Vue

本文链接：https://blog.csdn.net/JackieDYH/article/details/119908601

编码小技巧同时被 2 个专栏收录

74 篇文章 ¥9.90 ¥99.00

订阅专栏

超级会员免费看

Vue

373 篇文章

订阅专栏

本文详细介绍了Vue Router的三种参数传递方式：params、query和props。通过params传参时，需注意路径使用name，刷新页面后参数会丢失。query方式会暴露在URL中，适合传递简单数据。对于复杂数据，可以使用props并配合组件解耦，或利用sessionStorage、localStorage保存数据以应对刷新丢失问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

说明

点击列表的详情，跳转到详情内页，在内页根据传递的参数获取详情数据

刷新页面参数丢失

编程式导航

方法一：通过 params 传参

路由配置如下

{ 
    path: '/detail/:id',  //若id后面加?代表这个参数是可选的
    name: 'detail', 
    component: Detail 
}

通过 $router.push 中 path 携带参数的方式

// 列表中的传参
goDetail(row) {
    this.$router.push({
        path: `/detail/${row.id}`
    })
}

// 详情页获取参数
this.$route.params.id

通过 $router.push 的 params 传参

// 列表页传参
goDetail(row) {
    this.$router.push({
        name: 'detail',
        params: {
            id: row.id
        }
    })
}

// 详情页获取
this.$route.params.id