router.push、router.replace
时间: 2023-11-27 19:47:49 浏览: 74
vue-router 2.0 跳转之router.push()用法说明
5星 · 资源好评率100%
router.push 和 router.replace 是 Vue Router 中用于导航的两个方法。
router.push 方法用于将用户导航到一个新的 URL,并且在浏览器的历史记录中保存该导航。它会向路由堆栈中添加一个新的记录,因此用户可以通过浏览器的后退按钮返回到之前的页面。这个方法通常用于实现页面跳转。
示例代码:
```javascript
// 导航到 /home 页面
router.push('/home')
// 导航到带有查询参数的页面
router.push({ path: '/home', query: { id: 1 } })
// 导航到带有命名路由的页面
router.push({ name: 'home' })
```
router.replace 方法与 router.push 类似,但不会在浏览器的历史记录中添加新的导航记录。它会替换当前的历史记录,因此用户无法通过后退按钮返回到之前的页面。这个方法通常用于实现表单提交或者登录后的重定向。
示例代码:
```javascript
// 替换当前页面为 /about 页面
router.replace('/about')
// 替换当前页面为带有查询参数的页面
router.replace({ path: '/about', query: { id: 2 } })
// 替换当前页面为带有命名路由的页面
router.replace({ name: 'about' })
```
需要注意的是,这两个方法都可以接收一个字符串路径或者一个描述目标位置的对象作为参数。除了路径之外,还可以通过对象的方式传递查询参数、哈希值、命名路由等。
阅读全文