摘要:
在没有使用路由时,vue中参数传递是被限制在父子组件中,而当兄弟组件间需要传递参数时是很繁琐的,只能子传父父传子这样绕圈;但使用了路由之后就变得轻松许多。
根组件App:

router-view的注意点在代码中已经注释。
HelloWorld组件:
在这里插入图片描述
在这个组件中使用编程式导航进行跳转(router-link标签为申明式导航,且可以很方便的借助此标签的动态类名做高亮效果),并借助query查询字符串来传递参数
Test组件:
在这里插入图片描述
在这里插入图片描述
在Test组件中可以通过self. r o u t e . q u e r y 来 调 取 路 由 相 关 的 参 数 , route.query来调取路由相关的参数, route.queryroute里面有很多属性可以console看看
在这里插入图片描述
可以看见,包含了当前组件路由的所有信息,fullPath,matched,query,params,meta等(侧边栏动态路由高亮以及默认,就会用到matched中对象的path属性进行判断),到此借助路由的查询字符串传参已经完成了
还可以借助路由的params来传递参数
HelloWorld组件:
在这里插入图片描述
Test组件:
在这里插入图片描述
在这里插入图片描述在这里插入图片描述
但是如果我们将path和params一起用呢
在这里插入图片描述在这里插入图片描述
一起用的结果就是参数传递失败,原因在路由官网有说明
在这里插入图片描述
所以说明path+query,name+parmas都可以传递参数,也可以像官网说的一样直接用path中用模板字符串+占位符来拼接url,且不管是path还是name,都是指明了特定组件的,所以只会向指定的组件路由上去注入参数,其他兄弟组件的路由是接收不到的。

还有一种方式也是官方推荐的:
在这里插入图片描述
在这里插入图片描述
在定义路由时,加上props属性,将route作为参数传进箭头函数,然后取出里面的查询字符串并存进了props
HelloWorld组件:
在这里插入图片描述
路由index.js文件:
在这里插入图片描述
Xx组件:
在这里插入图片描述
在这里插入图片描述
页面:
在这里插入图片描述
在这里插入图片描述
这种方式传递参数,一是需要在配置路由时把props定义为一个函数,二是在组件内用props去接收,就完成了。
欢迎指正。

	我们可以发现router.push跟 window.history.pushState和 window.history.go好像, 实际上它们确实是效仿 window.history API 的。
Logo

前往低代码交流专区

更多推荐