VUE-编程式路由导航

编程式路由导航是通过JS代码实现路由的跳转。

一、路由的实现

1. hash：通过改变路径的哈希值，来去实现历史记录的保存。一旦改变了哈希值，浏览器的历史记录就会记录下来这个改变，而且浏览器还能监视改变。一旦监视就知道当前哈希值是多少，有了哈希值就能知道包含的路径，有了路径找到对应的路由组件，找到路由组件就拿出来显示。
2. getState/setState：和hash方式类似。有push和replace方式，这是浏览器要管理所有访问过的路径的状态

二、$router(路由器)可实现路由的跳转，栈结构

<button @click="pushShow(message.id)">push查看</button>
<button @click="replaceShow(message.id)">replace查看</button>
 <button @click="$router.back()">回退</button>

 pushShow(id){
                   this.$router.push(`/home/messages/MessageDetail/${id}`)
     },
 replaceShow(id){
                   this.$router.replace(`/home/messages/MessageDetail/${id}`)
                }

数组相当于一个序列，序列分为栈和队列。
栈：后进先出 replace增加替换
队列：先进后出 push增加

编程式路由导航的方式：

1. this.$router.push(path)：相当于点击路由链接（可以返回到当前路由界面）
2. this.$router.replace(path)：用新路由替换当前路由（不可以返回到当前路由界面）
3. this.$router.back()：请求（返回）上一个记录路由
4. this.$router.go(-1)：请求（返回）上一个记录路由

注意：组件对象属性有$route和$router.
$route：当前组件存数据的，可以传递访问数据。
$router.：路由器，功能的对象，操作路由的基本方法，可实现路由跳转栈结构。