VUE路由简单含参跳转链接理解
作为一个初学者,要实现一项特指的内容跳转,比如点击国内新闻是国内新闻的内容,点击国外新闻是国外新闻的内容,这时我们在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军队之间对应的交流。
- VUE 路由 跳转 简单案例
- vue2.0路由-适合刚接触新手简单理解
- 简单理解vue中Props属性_javascript技巧
- vue 编程式导航,使用js跳转路由
- vue路由传参并跳转页面
- 深入理解vue路由的使用
- vue【vue起点:使用vue-router实现简单页面跳转】
- Vue slot简单理解
- 第26篇:AngularJS+ui-router实现一个超简单的登陆和跳转的二级路由demo
- Node.js的路由跳转的一点理解
- Vue入门十二、路由的跳转
- vue学习笔记4——route,路由跳转等
- vue.js设置路由跳转时动画效果
- 简单的js路由跳转
- vue 路由 及 跳转传递参数的总结
- javascript一个简单的路由跳转
- Vue2.0路由篇之路由跳转的一个小问题
- Vue+Flask实现简单的登录验证跳转的示例代码
- vue简单的拦截路由,显示loading
- vue项目中跳转到外部链接方法