Vue路由跳转的四种方式

声明式路由

1、router-link

不带参数的跳转

      <router-link :to="{ name: 'xi' }">name方式</router-link>
      <router-link :to="{ path: 'ha' }">path方式</router-link>

 在router-link中，如果是’/‘开始就是从根路由开始，如果开始不带’/’，则从当前路由开始。  

 带参数的跳转

<router-link :to="{ path: '/home', params: { id: '1' } }"></router-link>
<router-link :to="{ path: '/home', query: { key: '1' } }"></router-link>

 在JavaScript中，params所传的参数通过（this.$route.params.参数；）获取；query所传的参数通过（this.$route.query.参数；）获取。

编程式路由

2、router.push(参数)   

这个方法会向 history 栈添加一个新的记录，当用户点击浏览器后退按钮时，则回到之前的 URL。

//不带参数
 this.router.push('home')
 this.router.push({ path: 'home' })
//带参数
 this.router.push({ name: 'user', params: { userId: '123' }})
 this.router.push({ path: 'register', query: { plan: 'private' }}) 

与router-link不同的是：如果push参数对象中是path， params不生效，只能通过query来传递。 

3、router.replace(参数)

与push非常类似，不同的是不会在history中加入新的记录，而是替换当前的history记录。

router.replace({path:'vue'})

4、router.go(num)

这个方法的参数是一个整数，意思是在 history 记录中向前或者后退多少步。

this.$router.go(1);