Vue Router 4 快速入门：探索页面跳转的两大方法

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

1）使用router-link

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

<template>
  <div>这里是首页</div>
  <router-link to="/list">点击跳转到列表页</router-link>
</template>

<script>
export default {}
</script>

<style></style>

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

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

然后我们在列表页也添加一个链接，跳转到首页

<template>
  <div>这里是列表页</div>
  <router-link to="/">点击跳转到首页</router-link>
</template>

<script>
export default {}
</script>

<style></style>

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

2）使用js控制

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

<template>
  <div>这里是首页</div>
  <router-link to="/list">点击跳转到列表页</router-link>
  <button @click="onBtnClick">按钮点击后跳转列表页</button>
</template>

<script>
export default {
  methods: {
    onBtnClick() {
      // 在这里可以处理一下其他逻辑
      this.$router.push('/list')
    },
  },
}
</script>

<style></style>

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