vue路由传参的三种方式-Toy模板网

这篇具有很好参考价值的文章主要介绍了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类型，接收后在转化回原类型

文章来源地址https://www.toymoban.com/news/detail-510190.html

//路由
{
    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

到了这里，关于vue路由传参的三种方式的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！