$router.go使用方法详解

$router.go() 是 Vue Router 提供的一个方法，用于在浏览器的历史记录中向前或向后移动。该方法可以接收一个数字作为参数，表示向前或向后移动的步数，例如：

// 向前移动一步
this.$router.go(1);

// 向后移动一步
this.$router.go(-1);

此外，$router.go() 还可以接收一个字符串作为参数，表示要移动到的路由地址，例如：

// 移动到 '/about' 路由
this.$router.go('/about');

需要注意的是，如果要使用 $router.go() 方法移动到的路由地址不存在，则会导致跳转失败。因此，在使用该方法时，建议先使用 $router.push() 方法进行路由跳转，确保要跳转的路由地址是存在的。

相关问题

reactrouter.replace

### React Router `replace` 方法详解

在开发单页应用(SPA)时，路由管理至关重要。React Router提供了多种方式来处理导航逻辑，其中`replace`方法用于替换当前历史记录条目而不是添加新的条目。

当使用`useNavigate` hook时，可以通过传递第二个参数作为对象给该hook，并设置其`replace`属性为true来实现页面跳转时不增加浏览器的历史栈长度[^2]：

import { useNavigate } from 'react-router-dom';

function HomeButton() {
  let navigate = useNavigate();

  function handleClick() {
    navigate('/home', { replace: true });
  }

  return (
    <button type="button" onClick={handleClick}>
      Go home
    </button>
  );
}

对于类组件，则可以直接通过`this.props.history.replace()`的方式达到相同效果[^1]:

class MyComponent extends React.Component {
  goToHome = () => {
    this.props.history.replace('/home');
  };

  render() {
    return <button onClick={this.goToHome}>Go Home</button>;
  }
}

值得注意的是，在某些场景下比如表单提交成功后重定向至另一页面而不希望用户点击返回按钮回到之前的表单状态时，`replace`就显得非常有用。

router.go使用方法详解

$router.go() 是 Vue Router 提供的一个方法，用于在浏览器的历史记录中向前或向后移动。该方法可以接收一个数字作为参数，表示向前或向后移动的步数，例如：

// 向前移动一步
this.$router.go(1);

// 向后移动一步
this.$router.go(-1);

此外，$router.go() 还可以接收一个字符串作为参数，表示要移动到的路由地址，例如：

// 移动到 '/about' 路由
this.$router.go('/about');

需要注意的是，如果要使用 $router.go() 方法移动到的路由地址不存在，则会导致跳转失败。因此，在使用该方法时，建议先使用 $router.push() 方法进行路由跳转，确保要跳转的路由地址是存在的。