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。
![在这里插入图片描述 [面试题] Vue路由跳转的四种方式_带参数](https://file.cfanz.cn/uploads/png/2022/12/21/2/OUdc1T6P8Q.png)
3. router.replace()(编程式路由)
导航后不会留下 history 记录,它会替换掉当前的 history 记录,即使点击返回按钮也不会回到这个页面。
![在这里插入图片描述 [面试题] Vue路由跳转的四种方式_带参数_02](https://file.cfanz.cn/uploads/png/2022/12/21/2/ZN5711DE52.png)
4. router.go(n)
这个方法的参数是一个整数,意思是在 history 记录中向前或者后退多少步(向前或者向后跳转n个页面,n可为正整数或负整数),类似 window.history.go(n)。
![在这里插入图片描述 [面试题] Vue路由跳转的四种方式_返回按钮_03](https://file.cfanz.cn/uploads/png/2022/12/21/2/a626Vc5ZdJ.png)
参考:
面试题:Vue路由跳转的四种方式










