vue路由传参的三种方式

目录

1.动态路由传参

2.params传参

3.query传参

---

1.动态路由传参

        使用“路径参数”使用冒号 : 标记。当匹配到一个路由时，参数值会被设置到 this.$route.params，也可以使用props来接收

//路由
{
    path:"/test/:id",
    name:"test",
    component:Test
}

//跳转方式有三种写法：
<router-link :to="/test/123"></router-link>

//或者
this.$router.push("/test/123")

//或者使用params传参
this.$router.push({
    name:test,
    params:{
        id:"123"
    }
})

//Test组件使用props接收，或者this.$route.params.id接收
    props:{
        id:{
            type:String,
            default:""
        }

    },

    mounted(){
        console.log(this.id)     //123
        console.log(this.$route.params.id)   //结果相同为123
    }

---

2.params传参

  params 传参（不显示参数）也可分为 声明式 和 编程式 两种方式，与方式一不同的是，这里是通过路由的别名 name 进行传值的

//路由
{
    path:"/test",
    name:"test",
    component:Test
}

//触发方式
this.$router.push({
    name:test,
    params:{
        id:"123"
    }
})

//组件接收
this.$route.params.id     // 123

---

3.query传参

  query 传参（显示参数）也可分为 声明式 和 编程式 两种方式，但是query传递的参数不能是对象、数组等复杂类型，会出现乱码的情况，如果要传递复杂类型可以将其转化为json类型，接收后在转化回原类型

        

//路由
{
    path:"/test",
    name:"test",
    component:Test
}

//触发方式
//声明式
<router-link :to="{name:'test',query:{id:123}}">进入test</router-link>
//编程式
this.$router.push({
    name:test,
    query:{
        id:"123"
    }
})

//组件接收
this.$route.query.id     // 123