vue-router 2.0 跳转之router.push()用法说明

router.push(location) 除了使用 创建 a 标签来定义导航链接，我们还可以借助 router 的实例方法，通过编写代码来实现。 router.push(location) 想要导航到不同的 URL，则使用 router.push 方法。这个方法会向 history 栈添加一个新的记录，所以，当用户点击浏览器后退按钮时，则回到之前的 URL。 当你点击 <router> 时，这个方法会在内部调用，所以说，点击 等同于调用 router.push(…)。 声明式：<router to=”…”> 编程式：router.push(…) 该方法的参数可以是一个字 Vue Router 是 Vue.js 应用中的官方路由库，它提供了强大的路由管理功能，使得单页面应用的导航变得简单。在 Vue Router 2.0 版本中，`router.push()` 是一个常用的方法，用于程序化地改变应用的当前路由。 `router.push(location)` 方法允许我们在代码中触发导航。`location` 参数可以是一个字符串路径或一个描述地址的对象。例如： 1. 字符串形式： ```javascript router.push('home'); ``` 2. 对象形式，包含路径和其他信息： ```javascript this.$router.push({ path: '/login?url=' + this.$route.path }); ``` 3. 命名的路由，需要指定 `name` 和 `params`： ```javascript router.push({ name: 'user', params: { userId: 123 } }); ``` 4. 包含查询参数，如 `/backend/order?selected=2`： ```javascript this.$router.push({ path: '/backend/order', query: { selected: "2" } }); ``` 5. 动态设置查询参数，根据当前路由的查询参数来构建新的跳转： ```javascript let queryData = { ... }; this.$router.push({ path: '/my/profile', query: queryData }); ``` 此外，`router.push()` 还可以与 `replace` 属性一起使用。如果设置了 `replace: true`，那么导航将不会在历史记录中留下新的条目，点击浏览器的返回按钮将不会回到该页面。这可以这样实现： ```javascript this.$router.push({ path: '/home', replace: true }); ``` 或者在声明式的 `<router-link>` 中通过 `replace` 属性实现相同效果： ```html <router-link :to="..." replace></router-link> ``` 在实际应用中，有时我们需要处理一些特殊场景，比如从登录页跳转到首页后，点击返回按钮出现的异常。例如，在 iOS 设备上，如果直接使用 `router.push()`，可能会导致路由变化但页面内容不变。为了解决这个问题，我们可以利用路由导航守卫 `beforeRouteLeave`： ```javascript beforeRouteLeave(to, from, next) { if (to.name === 'login') { next(false); // 不跳转 } else { next(); // 跳转到另一个路由 } } ``` 这样，当用户尝试从首页返回登录页时，守卫会阻止这次跳转，避免了问题的发生。 总结起来，`router.push()` 是 Vue Router 中核心的导航方法，它可以方便地在应用中动态改变路由，并且能配合 `replace` 属性进行无痕导航。同时，通过使用路由导航守卫，我们可以精确控制路由变化的行为，解决特定场景下的问题。