Vue路由是怎样传参的?

目录

1.params传参

2.路由属性配置传参

3.query传参

---

1.params传参

//路由配置
{
    //组件路径
    path:'/admin',
    //组件名称
    component:Admin,
    //组件别名
    name:'admin'
}

this.$router.push({
    name:'admin',
    //params是一个对象，id是属性名，item.id是值
    params:{
        id:item.id
    }
})

        可以通过 this.$route.params.id 获取 id 的参数值。

        注意：获取参数的时候是 $route，跳转和传参的时候是 $router

2.路由属性配置传参

//路由配置
{
    //组件路径
    path:'/admin',
    //组件名称
    component:Admin,
    //组件别名
    name:'admin'
}

this.$router.push({
    name:'/admin/${item.id}'
})

        可以通过 this.$route.params.id 获取 id 的参数值。

3.query传参

        参数直接在 url 后面添加，参数可见，可以解决页面刷新数据丢失的问题。

//路由配置
{
    //组件路径
    path:'/admin',
    //组件名称
    component:Admin,
    //组件别名
    name:'admin'
}

this.router.push({
    name:'/admin',
    query:{id:item.id}
})