Vue Router 中的路由跳转方式大体上可以分为两类：

  1. 组件标签跳转
  2. API 方法跳转

    一、基本用法

    1、组件标签跳转

    Vue Router 中的组件标签跳转，就类似 HTML 中的 <a> 标签跳转。
    Vue Router 中提供了一个 <router-link> 组件，搭配 to 属性来实现路由的跳转：
    1. <router-link to="/register">没有账号？去注册</router-link>
    2. <router-link :to="{ path: '/register' }">没有账号？去注册</router-link>
    3. <router-link :to="{ name: 'Register' }">没有账号？去注册</router-link>
    注意：值为对象时，to 属性需要通过 v-bind 动态绑定。

    2、API 方法跳转

    当我们在跳转前还需要做一些额外的处理时，直接用 <router-link> 组件跳转就不适用了。
    因此 Vue Router 中还提供了 API 方法跳转的方式：
    1. export default {
    2.  methods: {
    3.      register() {
    4.          alert('恭喜你，注册成功。');
    5.          // 方式一：
    6.          this.$router.push('/login');
    7.          // 方式二：
    8.          this.$router.push({
    9.              path: '/login'
    10.          })
    11.          // 方式三：
    12.          this.$router.push({
    13.              name: 'Login'
    14.          })
    15.      }
    16.  }
    17. }

    二、不保留历史记录

    如果使用路由的基本跳转方式来进行跳转，跳转后浏览器中会保留每一个页面的访问记录，用户通过浏览器的“前进”、“后退”按钮可以返回到上一个页面和前进到下一个页面。
    但是，在某些特殊页面中，我们是希望用户跳转离开后，不能再回退回来。
    例如：用户登录成功后，跳转到首页，我们就希望用户不能再通过“回退”按钮回到登录页。
    所以，我们需要在跳转后不保留当前页面的访问记录。
    Vue Router 中提供了如下方式，来实现跳转后不保留当前页面的记录：
    1. <router-link to="/login" replace>登录</router-link>
    1. export default {
    2.  methods: {
    3.      login() {
    4.          alert("登录成功。");
    5.          this.$router.replace('/login');
    6.      }
    7.  }
    8. }