vue 路由传参的3种方式

1. 路由配置

// 页面路由格式 /detail/1
// 页面刷新后路由参数依然在。

// 路由定义
{
    name:'Detail',
    path:'/detail/:id',
    component:Detail
}

// 页面跳转
this.$router.push({
    path:'/detail/1',
})
// 或者同方式2
this.$router.push({
    name:'Detail',
    params:{id:1}
})

// Detail 组件获取参数
this.$route.params.id

2. params传参

// 页面路由格式 /detail
// 路由跳转时仅支持name，不能使用path。页面刷新后路由参数丢失。

// 路由定义
{
    name:'Detail',
    path:'/detail',
    component:Detail
}

// 页面跳转
this.$router.push({
    name:'Detail',
    params:{id:1}
})

// Detail 组件获取参数
this.$route.params.id

3. query传参

// 页面路由格式 /detail?id=1
// 路由跳转时支持path和name。页面刷新后路由参数依然在。

// 路由定义
{
    name:'Detail',
    path:'/detail',
    component:Detail
}

// 页面跳转
this.$router.push({
    name:'Detail',
    // path:'/detail',
    query:{id:1}
})

// Detail 组件获取参数
this.$route.query.id