vue实现跳转页面

Vue 实现页面跳转的方法

在 Vue 中实现页面跳转可以通过多种方式，以下是几种常见的方法：

使用 router-link 组件

router-link 是 Vue Router 提供的组件，用于声明式导航。适合在模板中直接使用。

<router-link to="/about">跳转到关于页面</router-link>

可以通过 :to 绑定动态路径：

<router-link :to="{ path: '/user', query: { id: 123 } }">用户详情</router-link>

编程式导航

通过 this.$router.push 方法实现跳转，适合在 JavaScript 逻辑中触发。

this.$router.push('/about');

传递参数：

// 路径参数
this.$router.push({ path: '/user/123' });

// 查询参数
this.$router.push({ path: '/user', query: { id: 123 } });

替换当前页面

使用 this.$router.replace 替换当前页面，不会留下历史记录。

this.$router.replace('/home');

导航到历史记录

返回上一页：

this.$router.go(-1);

前进到下一页：

this.$router.go(1);

命名路由跳转

如果路由配置了 name，可以直接通过名称跳转：

this.$router.push({ name: 'user', params: { id: 123 } });

动态路径参数

在路由配置中定义动态参数：

const routes = [
  { path: '/user/:id', component: User }
];

跳转时传递参数：

this.$router.push('/user/123');

在目标页面通过 this.$route.params.id 获取参数。

路由传参的注意事项

• 使用 params 时，必须通过 name 跳转。
• 使用 query 时，参数会显示在 URL 中。
• 动态参数需要在路由配置中提前定义。

以上方法适用于 Vue 2 和 Vue 3，但 Vue 3 中可能需要从 vue-router 导入 useRouter 和 useRoute 来替代 this.$router 和 this.$route。