[vue-router4快速入门] 1.页面跳转的两种方式

Posted 2023-03-10

参考技术A 在上节课我们配置了两个页面，一个首页/一个列表页/list，现在我们要查看这两个页面只能通过在浏览器地址栏里输入url，这节课我们就来学习一下如何实现页面的跳转

router-link是vue-router自带的一个组件，表示一个链接元素，和原生的a标签非常像，比如我们在首页里增加一个router-link，点击后跳转到列表页

在router-link里有一个to属性，表示点击后要跳转的页面，跟a标签的href属性一样，
页面效果是这样的

其实它本来也被渲染成了一个a标签

这是最简单的router-link的使用，以后我们会介绍它的其他功能

用router-link还是不够灵活，比如我们点击一个按钮时，先要做一些别的事，比如向后台上传数据，再跳转页面，这时候我们用js去控制跳转页面就灵活多了
我们增加一个按钮，给它绑定一个点击事件

在点击回到事件里，我们有this.$router，获取到了路由对象，调用了它的push方法，参数就是我们要跳转的页面的路由，点击后页面就跳转了
这节课的逻辑很简单，主要是大家要把这两种跳转方式的写法记住，动手写一写，记得更快。