路由和声明式导航<router-link>及编程式导航this.$router.push的关系

本文详细介绍了Vue中路由配置的作用,强调路由配置并不自动触发页面跳转,而是需要通过声明式导航(如)或编程式导航(如this.$router.push())来实现。在声明式导航中,的to属性指定目标路由,而编程式导航则在点击事件中调用this.$router.push()方法来切换路由。这两个方式都是将路由与组件对应,实现页面间的跳转。
摘要由CSDN通过智能技术生成

路由只是将路径和模块组合在一起,让它们一一对应,含义就是如果你将来点击了这个路径,就会显示这个组件;

但是路由配置好了,它不会自己跳呀,它需要外力呀。

这个外力是什么:

可以是声明式导航<router-link>,它的用法是:这个router-link标签本质上其实就是a标签,它里面有个属性to ,就是要跳转到的路由,刚好这个路由和组件配置好了,一一对应了,你点这个标签修饰的内容,就会跳转到这个组件去,因为本来是跳到这个路由去,刚好这个路由和组件对应,就会跳到组件里去;

外力也可以是编程式导航:就是在你想要跳的标签身上,增加点击事件,在函数里写代码,用this.$router.push(‘路径’)去跳到这个路径,然后这个路径对应的是这个组件,所以就跳到了这个组件这里,图示:

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

陌一一

你的鼓励是我最大的动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值