目录

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>
Logo

CSDN联合极客时间,共同打造面向开发者的精品内容学习社区,助力成长!

更多推荐