vue跳转页面的几种方法

// 方法1：使用 this.$router.push()
// 通过路径跳转
this.$router.push('/home');
// 或者通过命名路由跳转
this.$router.push({ name: 'home' });
// 或者带参数跳转
this.$router.push({ name: 'user', params: { userId: 123 } });

// 方法2：使用 this.$router.replace()
// 类似于 push，但是 replace 不会向 history 添加新记录
this.$router.replace('/home');
// 或者通过命名路由跳转
this.$router.replace({ name: 'home' });
// 或者带参数跳转
this.$router.replace({ name: 'user', params: { userId: 123 } });

// 方法3：使用 <router-link> 组件
// 在模板中使用 <router-link> 组件进行页面跳转
<router-link to="/home">Home</router-link>
// 或者通过命名路由跳转
<router-link :to="{ name: 'home' }">Home</router-link>
// 或者带参数跳转
<router-link :to="{ name: 'user', params: { userId: 123 } }">User</router-link>

// 方法4：使用编程式导航结合事件
// 可以在事件处理函数中使用编程式导航
methods: {
  goHome() {
    this.$router.push('/home');
  }
}

解释说明：

1. this.$router.push()：用于导航到不同的 URL。可以传递一个字符串路径或一个描述目标位置的对象。不会替换当前历史记录。
2. this.$router.replace()：类似于 push，但它不会向浏览器历史记录添加新记录，而是替换当前记录。
3. <router-link> 组件：这是一个 Vue Router 提供的组件，用于声明式地导航。它会渲染为一个 <a> 标签，默认情况下点击时会调用 push 方法。
4. 编程式导航结合事件：可以在方法中使用 push 或 replace 来实现页面跳转，通常与按钮点击等事件结合使用。