声明式导航与编程式导航

声明式导航与编程式导航,第1张

目录

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演示:

欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/web/940163.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2022-05-17
下一篇 2022-05-17

发表评论

登录后才能评论

评论列表(0条)

保存