声明式导航与编程式导航

目录

vue-router中的编程式导航API

演示 

---

首先在Vue的学习中，我们会引出导航这么一个概念

那么什么是导航呢？

nav？----嗯~~好像也对，但我们今天说的不是nav

我们点击链接切换组件，这就是导航，我更愿意称其为路径导航

导航又分为俩种，就是我们标题所说的：

声明式导航：我们在网页中点击<a>链接实现网页的切换；在Vue项目中点击<router-link></router-link>切换组件，这都属于声明式导航

编程式导航：women调用API方法实现导航的方式叫做编程式导航，比如在普通的网页中我们会去掉用location.href跳转到新页面

那么在Vue我们该怎么实现编程式导航呢？

---

vue-router中的编程式导航API

最常用的有这五种，或者说三种---为什么呢？我们往下看

this.$router.push('Hash地址')

跳转到指定Hash地址，且增加一条历史记录

this.$router.replace('Hash地址')

跳转到指定Hash地址，且替换掉当前历史记录

this.$router.go('Number')

在浏览器历史记录中前进或者后退（1、-1......）

如果超出上限的话，则原地不动

因为在实际开发中前进或者后退一个以上页面是不常使用的，所以vue-router为我们提供了以下俩种方法用来前进后退一个页面：

this.$router.back()

后退一个历史页面

this.$router.forward()

前进一个历史页面

---

演示 

replace演示：

<button @click="getMove">点击去更多详情页</button>

methods: {
  getMove () {
    this.$router.replace('/Move')
  }
}

 直接覆盖掉--不能回退

back演示：

<button @click="$router.back()">点击前进一个页面</button>