Vue方向:路由跳转的三大方式以及它们之间的区别

1、this.$router.push()

通过将路由压入栈,实现跳转到不同的路由,向history栈添加一个记录,点击后退会返回到上一个页面

//写法一
this.$router.push({path:'./botnav/index'})
//写法二
this.$router.push('./botnav/index')
//写法三
this.$router.push({name : 'index'})
this.$router.push.gif

2、this.$router.replace()

这个也是登录页面路由跳转的常用方式之一,这个也是跳转到指定的url,但是这个方法不会向history里面添加新的记录,点击返回,会跳转到上上一个页面。上一个记录是不存在的。

this.$router.replace({path:'./botnav/index'})

使用这种方式登录进去后,点击浏览器的回退按钮,不会回到上一个页面的。


this.$router.replace.gif

3、this.$router.go(n)

n为任意数字,为0的话则会强制刷新浏览器

// 浏览器记录前进一步
this.$router.go(1) 
// 浏览器记录后退一步
this.$router.go(-1)
// 浏览器记录前进十步,如果浏览器没这么多记录,那么就是前进失败
this.$router.go(10)  
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容