vue实现路由跳转的四种方法

Vue中的路由跳转

安装axios
npm install axios

router-link跳转.

//router-link跳转
 <router-link :to="{ name: 'teacher' }">跳转到老师页面(name跳转)</router-link>
 <router-link :to="{ path: '/teacher' }">跳转到老师页面(path跳转)</router-link>
//router-link是vue中提供的一种跳转页面的相关方式

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

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

## this.$router.replace() 

## this.$router.go()

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可为正数可为负数。正数返回上一个页面

this.$router.go(1)              //回到上一页  history.forward()
this.$router.go(-1)             //回到下一页  history.back()

//但其中的数字也不可能无限大或者无线小  当数字超过history中记录的就会失败
this.$router.go(10000)      //将不会进行相关跳转 

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

这篇好文章是转载于：学新通技术网