Vue中路由传参的几种形式
2021/7/14 23:05:30
本文主要是介绍Vue中路由传参的几种形式,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
- 传参链接
<router-link to="/home/message/detail/12?title=张三">detail</router-link> //12 为params 参数传递形式 //title 为query 参数传递形式
- 路由形式
path:'detail/:id', //params形式,params传递的参数为12 // path:'detail', //默认形式,query传参用的是这种形式 component:Detail, // 方式一 布尔值 // props:true,//将所有的params参数直接映射到props中 //注意:这种方式只能是params传参,并且在路由接收的时候需要声明 props["id"] 来接收传递的参数值 // 方式二 对象 // props:{id:11,name:"张三11"} //注意:这种方式是自定义传参,传递的参数为死数据,并且在路由接收的时候需要声明 props["id","name"] 来接收传递的参数值 // 方式三 props: route => ({ id:route.params.id, title:route.query.title, name:"自定义的值" }) //注意:这种方式可以是query,也可以是params传参,并且在路由接收的时候需要声明 props["id","name"] 来接收传递的参数值
- 路由接收数据
一.this.$route 来接收 二.props:["id","name"] 具体视情况而定
这篇关于Vue中路由传参的几种形式的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-11-01Vue.js 是什么-icode9专业技术文章分享
- 2024-11-01Vue3入门教程:从零开始搭建第一个Vue3项目
- 2024-11-01详解vueRouter4基础教程
- 2024-11-01Vuex4课程:初学者的完整入门指南
- 2024-10-31Vue3课程:新手入门到初级掌握
- 2024-10-31Vue3课程:新手入门到初级应用详解
- 2024-10-31VueRouter4课程:新手入门与实战指南
- 2024-10-31Vuex4学习:从入门到初级实战教程
- 2024-10-31Vue3教程:新手入门与基础实战
- 2024-10-31Vue教程:新手快速入门指南