[面试题] Vue路由跳转的四种方式

1.router-link（声明式路由）

<router-link :to="'/home'">Home</router-link>

<!-- 使用 name,path 都可以,建议使用 name -->
 
 
<!-- 不带参数 -->
<router-link :to="{name:'home'}">Home</router-link>
 
<router-link :to="{path:'/home'}">Home</router-link>
 
 
<!-- 带参数 -->
<!-- http://localhost:8080/home -->
<router-link :to="{name:'home',params:{id:123}}">Home</router-link>
     
<!-- http://localhost:8080/home?id=123 -->
<router-link :to="{path:'/home',query:{id:123}}">Home</router-link>

2. router.push()（编程式路由）

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

3. router.replace()（编程式路由）

导航后不会留下 history 记录，它会替换掉当前的 history 记录，即使点击返回按钮也不会回到这个页面。

4. router.go(n)

这个方法的参数是一个整数，意思是在 history 记录中向前或者后退多少步（向前或者向后跳转n个页面，n可为正整数或负整数），类似 window.history.go(n)。

---

参考：
​面试题：Vue路由跳转的四种方式​​