VUE 路由跳转及传参

一、路由配置传参

路由

{
    path: "/goods/:id",
    name: "Goods",
    component: Goods
}

传参

配置传递的参数会在url后面显示id，例如：/goods/1

this.$router.push({path: `/goods/${id}`});

 获取参数

this.$route.params.id

 

二、路由跳转 params 传参

路由

{
    path: "/goods",
    name: "Goods",
    component: Goods
}

 传参 

params 传递的参数不会在url后面显示?id=1，例如：/goods

this.$router.push({ name: "Goods", params: { id: id }})

获取参数

this.$route.params.id

 

三、路由跳转 query 传参

路由

{
    path: "/goods",
    name: "Goods",
    component: Goods
}

传参 

query 传递的参数会在url后面显示?id=1，例如：/goods?id=1

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

获取参数

this.$route.query.id