星光不问赶路人，时光不负有心人
【30.Vue Router--编程式导航】
除了使用 <router-link> 创建 a 标签来定义导航链接，我们还可以借助 $router 的实例方法，通过编写代码来实现。
编程式路由导航的5种方法
我们先看一下组件实例中的this.$router都有哪些好用的api:【部分截图】
1.push【导航到不同的位置,添加一条新的历史记录】
注意：在 Vue 实例中，你可以通过 $router 访问路由实例。因此你可以调用 this.$router.push。
想要导航到不同的 URL，可以使用 $router.push 方法。这个方法会向 history 栈添加一个新的记录，所以，当用户点击浏览器后退按钮时，会回到之前的 URL。
当你点击 <router-link> 时，内部会调用这个方法，所以点击 <router-link :to="..."> 相当于调用 $router.push(...) ：
| 声明式 | 编程式 |
|---|---|
<router-link :to="..."> | $router.push(...) |
该方法的参数可以是一个字符串路径，或者一个描述地址的对象。例如：
// 字符串路径
$router.push('/users/eduardo')
// 带有路径的对象
$router.push({ path: '/users/eduardo' })
// 命名的路由，并加上参数，让路由建立 url
$router.push({ name: 'user', params: { username: 'eduardo' } })
// 带查询参数，结果是 /register?plan=private
$router.push({ path: '/register', query: { plan: 'private' } })
// 带 hash，结果是 /about#team
$router.push({ path: '/about', hash: '#team' })
2.replace【替换当前位置】
- replace ：删掉上一条历史记录，并把本记录添加到history栈中。
它的作用类似于 $router.push，唯一不同的是，它在导航时不会向 history 添加新记录，正如它的名字所暗示的那样——它取代了当前的条目。
| 声明式 | 编程式 |
|---|---|
<router-link :to="..." replace> | $router.replace(...) |
也可以直接在传递给 $router.push 的 routeLocation 中增加一个属性 replace: true ：
$router.push({ path: '/about', replace: true })
// 相当于
$router.replace({ path: '/about' })
this.$router.replace({
// name: 'xiangqing',
path:'/home/stars/detail',
//传参
query: {
title: s.title,
works: s.works,
},
})
法一：<router-view> + 声明式：<router-link :to=" ....">
法二：<router-view> + 编程式：this.$router.xxx
3.go(n)【横跨历史】
该方法采用一个整数作为参数，表示在历史堆栈中前进或后退多少步，类似于 window.history.go(n)。
例子
// 向前移动一条记录，与 $router.forward() 相同
$router.go(1)
// 返回一条记录，与 $router.back() 相同
$router.go(-1)
// 前进 3 条记录
$router.go(3)
// 如果没有那么多记录，静默失败
$router.go(-100)
$router.go(100)
4、forward【前进】
this.$router.forward() 前进，前进到下一次的历史记录（相当于浏览器的→按钮）
this.$router.forward() //在组件实例中调用
5、back【后退】
this.$router.back() 后退，后退到上一次的历史记录（相当于浏览器的←按钮）
this.$router.back()
- 【注意】：在组件实例中调用以上方法，都得加上
this【例如：this.$router.go(1)】
我们看一下地址栏【初始：localhost:8080/#/】，页面结果展示：
- 第1步：点击–About，
localhost:8080/#/about,【默认：push】 - 第2步：点击–Home，
localhost:8080/#/home,【默认：push】 - 第3步：点击–喜欢的三部动漫，
localhost:8080/#/home/cartoon，【设置了replace：替换掉第2步】 - 第4步：点击–喜欢的三个明星，
localhost:8080/#/home/stars,【设置了replace：替换掉第3步】 - 第5步：点击–周星驰，
http://localhost:8080/#/home/stars/detail?title=周星驰&works=《功夫》,【跳转到detail，并携带参数】 - 第6步：点击–测试push并跳转到detail，
http://localhost:8080/#/home/stars/detail，【跳转到detail，但是未携带参数】 - 第6步：点击–测试replace并跳转到About，
localhost:8080/#/about,【跳转到第1步】
后续等vue2-3所有基础知识学完后，整个学习笔记的代码会上传到github
