本文章总结Vue.router在项目中的使用。
首先，直接拿出Vue.router文档：router.vuejs.org/zh/
Chaper1. 先说几个编程式导航，用于js/ts中：
一、router.push
this.$router.push("/src/path/") //参数为字符串
//*******
const userId = '123'
this.$router.push({ name: 'user', params: { userId }}) // -> /user/123
this.$router.push({ path: `/user/${userId}` }) // -> /user/123
这个方法会向 history 栈添加一个新的记录，所以，当用户点击浏览器后退按钮时，则回到之前的 URL。
二、router.replace
用法和上面相同，唯一的不同就是，它不会向 history 添加新记录，而是跟它的方法名一样 —— 替换掉当前的 history 记录。
三、router.go(n)
这个方法的参数是一个整数，意思是在 history 记录中向前或者后退多少步，类似window.history.go(n)。
// 在浏览器记录中前进一步，等同于 history.forward()
router.go(1)
// 后退一步记录，等同于 history.back()
router.go(-1)
// 前进 3 步记录
router.go(3)
// 如果 history 记录不够用，那就默默地失败呗
router.go(-100)
router.go(100)
Chaper2. 标签的使用<router-link>
- 用于支持用户在具有路由功能的应用中 (点击) 导航。
- 通过 to 属性指定目标地址，默认渲染成带有正确链接的
<a>标签，to后面的地址直接生成href后面的地址。 - 可以通过配置 tag 属性生成别的标签.。另外，当目标路由成功激活时，链接元素自动设置一个表示激活的 CSS 类名。
1.<router-link>默认渲染为一个<a>标签,假如我们想把<router-link>渲染成其他标签，可修改其属性tag:
<router-link to="/login" tag=“span”>登陆</router-link>
<router-link to="/register">注册</router-link>
结果：
2.<router-link>和编程式的结合----后退按钮（源自csdn）
<router-link to > //要写一个空的to属性
<button @click="$router.back(-1)"> //表示后退点击事件
<Icon name="Cancel" />
</button>
</router-link>
