您的位置:首页 > Web前端 > Vue.js

VUE路由简单含参跳转链接理解

2019-04-27 10:05 267 查看
版权声明:本文为博主原创文章,遵循 CC 4.0 by-sa 版权协议,转载请附上原文出处链接和本声明。 本文链接:https://blog.csdn.net/Leon_Kbl/article/details/89598198

作为一个初学者,要实现一项特指的内容跳转,比如点击国内新闻是国内新闻的内容,点击国外新闻是国外新闻的内容,这时我们在vue中就需要涉及到路由含参跳转,从而达到一一对应的信息匹配,下面我就写写初学者我的理解:
绿色下划线na对应的是导入组件的名字,component中的na必须和import中的na一一对应,在保证俩者俩者相同的条件下,取名随心情。
这里的ne是路由名称,n是跟随的参数,他们是news组件给的,将与下图中路由传导时的对应下划线路由名字及参数一一对应,在保证对应的条件下,取名随心情。


此时是在cate组件里,这里name后跟的ne即上面提到的news组件路由的名字,n即上面提到跟随的参数,<router -link :to="{name:‘ne’,params:{n:c.id}}">中<router -link :to="{name:‘ne’,params:{n>的意思是链接到另一个路由叫ne且含参为n,而n被本组件即cate赋值为id,而id是cate数据库cat中所拥有的东西,此时得到的结果就是参数n:拥有id的值。

这里我到达了news组件中,cad为news组件数据库中的数据,cid是随意定义的一个属性名:初始值为0,而cid最终被赋予新的值,这个值就是由参数n从cate组件中带过来的,即上面提到的id,从而cid通过n得到了cate中id的值,进而拿得到id的cid与本组件news数据库中的cad去作比较,达到判断俩个组件之间的关联。

总结:俩个组件之间需要达到关联,即通过参数跳转,必须俩个组件有相同的部分作为匹配条件,而这俩者之间的条件需要参数来传递。达成俩者之间的联系。

故事理解:从前有news,cate俩个军队,在一个大雾朦胧的天气下在大海中行驶执行任务,news队发现远处有船队,但又不敢确定,于是 就派一个叫n的使者前去查看,当n到达cate军队中,cate军队正在操练,那阵势锣鼓喧天、鞭炮齐鸣。吓得n哆嗦,cate军队的将领看n害怕的模样,安抚他不要害怕,几天好酒好菜招待,并 从自己的库中找来了信物id给n,<router -link :to="{name:‘ne’,params:{n:c.id}}">,回去交于news将领查看,使者n吃饱喝足,感谢了cate将领的招待,回到了news军队,当使者n回到cate军队,把信物交给cate将领,cate将领 指派一个叫cid的亲信拿着n给的信物id去自己的库中找到cad进行匹配,确认过眼神是对信物,从而达到了cate军队,与news军队之间对应的交流。

内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: