Vue-router的编程式导航有哪些方法？

Vue-router 提供了编程式导航的方法，这些方法允许你以编程的方式控制路由的跳转，而不是依赖于用户点击 <router-link> 组件。以下是 Vue-router 中常用的编程式导航方法：

1. router.push(location, onComplete?, onAbort?)
   • location：可以是一个描述目标位置的对象或者一个表示目标路径的字符串。
   • onComplete（可选）：导航成功完成 (在所有的异步钩子被解析之后) 调用，此时 html5History 模式下的 URL 已经更新。
   • onAbort（可选）：导航到目标路由失败时被调用（例如，在目标路由设置了守卫钩子且这些钩子阻止了路由）。
   • 使用 router.push 方法可以导航到不同的 URL，这个方法会向 history 栈添加一个新的记录，所以，当用户点击浏览器后退按钮时，则回到之前的 URL。
2. router.replace(location, onComplete?, onAbort?)
   • 与 router.push 类似，但它不会向 history 添加新记录，而是替换掉当前的 history 记录。
   • 使用 router.replace 方法后，用户点击浏览器后退按钮时，不会返回到之前的 URL。
3. router.go(n)
   • 这个方法的参数是一个整数 n。
   • 当 n 为正数时，表示向前移动 n 个页面。
   • 当 n 为负数时，表示向后退 n 个页面。
   • 如果 n 为 0，则不进行任何操作。
   • 这个方法类似于 window.history.go(n)。
4. router.back()
   • 相当于 router.go(-1)，表示后退到上一个页面。
5. router.forward()
   • 相当于 router.go(1)，表示前进到下一个页面，但这只在你已经进行了一次 router.go(-1) 后才能有效，因为前进的页面是在 history 栈中向前移动的。

使用这些编程式导航方法时，需要确保你的 router 实例是可用的。在 Vue 组件中，你可以通过 this.$router 访问到它。

// 在 Vue 组件中   export default {     methods: {       goToHome() {         this.$router.push('/home');       },       replaceToProfile() {         this.$router.replace('/profile');       },       goBack() {         this.$router.back();       }     }   }

注意：当使用 HTML5 History 模式时，onComplete 和 onAbort 回调参数只有在 history.pushState API 可用时才有效。