vue使用路由在兄弟组件间参数传递
摘要:在没有使用路由时,vue中参数传递是被限制在父子组件中,而当兄弟组件间需要传递参数时是很繁琐的,只能子传父父传子这样绕圈;但使用了路由之后就变得轻松许多。根组件App:router-view的注意点在代码中已经注释。HelloWorld组件:在这个组件中使用编程式导航进行跳转(router-link标签为申明式导航,且可以很方便的借助此标签的动态类名做高亮效果),并借助quer...
摘要:
在没有使用路由时,vue中参数传递是被限制在父子组件中,而当兄弟组件间需要传递参数时是很繁琐的,只能子传父父传子这样绕圈;但使用了路由之后就变得轻松许多。
根组件App:
router-view的注意点在代码中已经注释。
HelloWorld组件:
在这个组件中使用编程式导航进行跳转(router-link标签为申明式导航,且可以很方便的借助此标签的动态类名做高亮效果),并借助query查询字符串来传递参数
Test组件:
在Test组件中可以通过self.
r
o
u
t
e
.
q
u
e
r
y
来
调
取
路
由
相
关
的
参
数
,
route.query来调取路由相关的参数,
route.query来调取路由相关的参数,route里面有很多属性可以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 的。
更多推荐
所有评论(0)