声明式导航与编程式导航_html-js-css

vue-router中的编程式导航API

演示

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

那么什么是导航呢？

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

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

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

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

编程式导航：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演示：

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

直接覆盖掉--不能回退

back演示：

欢迎分享，转载请注明来源：内存溢出

声明式导航与编程式导航