vue实现路由跳转的方法-Toy模板网

这篇具有很好参考价值的文章主要介绍了vue实现路由跳转的方法。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

router-link跳转

router-link是vue中提供的一种跳转页面的相关方式

1.其中router-link中使用v-bind绑定了一个对象(其实也可以理解成路由跳转的目的地)

2.其中有两种跳转方法，1-利用你的路由名字来进行跳转(推荐跳转的方法) 2-利用路由的path来进行跳转，但使用这种方法来进行跳转有注意事项//注意：利用path跳转的时候的前面的/表明的是从根路由开始找如果没加/则从当前路由开始找。
//就没有像使用第一种跳转时那么方便## this.$router.replace() ## this.$router.go()

//router-link跳转
<router-link :to="{ name: 'teacher' }">跳转到老师页面(name跳转)</router-link>
<router-link :to="{ path: '/teacher' }">跳转到老师页面(path跳转)</router-link>

this.$router.push()跳转

通常这种跳转都是结合方法进行相关的跳转的，其中的核心部分就是如下:

this.$router.push({name:'home'})
//通常用于与后台数据进行交互是的跳转，因为可以人为的设置跳转的目的地
##this.$router.replace()
## this.$router.go()

this.$router.replace()

//这种方法和上面的push的用法相同，都是可以进入指定的url页面
this.$router.push({name:'home'})//但不同点就在于是 push简而言之就是入栈，即通过push这种方法进行的跳转会将跳转的记录压入history中，这样当用户点击浏览器的返回上一页的时候就能准确的回到上一页。但使用replace这种方法就无法达到上一种的效果，他会直接返回发起跳转时页面的上一个页面。类似于向前回滚2次
//通常用于与后台数据进行交互是的跳转，因为可以人为的设置跳转的目的地.

this.$router.go()

从这个函数的名字是不难看出 go 即为跳转.相对于当前页面向前或向后跳转多少个页面,类似 window.history.go(n)。n可为正数可为负数。正数返回上一个页面文章来源地址https://www.toymoban.com/news/detail-706919.html

this.$router.go(1)              //回到上一页  history.forward()
this.$router.go(-1)             //回到下一页  history.back()
//但其中的数字也不可能无限大或者无线小  当数字超过history中记录的就会失败
this.$router.go(10000)      //将不会进行相关跳转 //但不同点就在于是 push简而言之就是入栈，即通过push这种方法进行的跳转会将跳转的记录压入history中，这样当用户点击浏览器的返回上一页的时候就能准确的回到上一页。但使用replace这种方法就无法达到上一种的效果，他会直接返回发起跳转时页面的上一个页面。类似于向前回滚2次
//通常用于与后台数据进行交互是的跳转，因为可以人为的设置跳转的目的地

到了这里，关于vue实现路由跳转的方法的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！