Vue路由传参详细介绍_vue.js_

路由传参

效果展示

通过传参，可以让Persons路由组建中的内容，在新的路由组件Show显示出来，Show路由组件要嵌套到Persons路由组件中

Persons路组件中的内容

params的类型（后附源码）

path：‘show/:id/:realname’ :id/:realname，是为传参所声明的，props：true 可以理解成可以传参，这只是其中的一种方法，也是个人觉得最简单理解的方法。

在persons路由组件中经过v-for遍历数组获得值，赋值给传参目标

在show路由组建中，使用props:['id','realname'],这要对应上，在index.js所声明的名字

params的类型源码不要在意注释代码

跟上文顺序一样，一一对应

{ path:'/persons', component:Persons, children:[ { path:'show/:id/:realname',component:Show,props:true // name:'show', path:'show',component:Show } ] },

​​​​​​query参数的类型

跟普通的路由声明一样，这里起的名字，在后续会使用到

在persons路由组件的遍历，得到想要的值，与上面一种方法有着很大的区别

姓名：{{item.realname}}

?id=${item.id}&realname=${item.realname}是获取id，获取姓名

在show路由组件中，需要通过计算属性来获得，传参的内容

query参数的类型源码同样无视注释代码

同上顺序，一一对应

{ path:'/persons', component:Persons, children:[ { // path:'show/:id/:realname',component:Show,props:true name:'show', path:'show',component:Show } ] },

路由name

简化路由的跳转 路由较长的使用名称

上述query跳转 推荐如下写法：

姓名：{{item.realname}} -->

其他代码与其上相同，如下第二张图片显示，起的名字就是这样的使用方法

到此这篇关于Vue路由传参详细介绍的文章就介绍到这了,更多相关Vue路由传参内容请搜索以前的文章或继续浏览下面的相关文章希望大家以后多多支持！

提示： 本文由神整理自网络，如有侵权请联系本站删除！
本站声明：
1、本站所有资源均来源于互联网，不保证100%完整、不提供任何技术支持；
2、本站所发布的文章以及附件仅限用于学习和研究目的;不得将用于商业或者非法用途；否则由此产生的法律后果，本站概不负责！