vue实现页面之间跳转

Vue 页面跳转的实现方式

在 Vue 中实现页面跳转可以通过多种方式，包括使用 Vue Router 提供的导航方法以及原生 JavaScript 的方式。以下是常见的实现方法：

使用 router-link 组件

router-link 是 Vue Router 提供的组件，用于声明式导航。它会在渲染时自动生成 <a> 标签，并通过 to 属性指定目标路由。

<router-link to="/home">跳转到首页</router-link>

可以通过 :to 绑定动态路由或命名路由：

<router-link :to="{ name: 'user', params: { userId: 123 }}">用户详情</router-link>

编程式导航

通过调用 router 实例的方法实现跳转，通常在 JavaScript 代码中触发。

// 跳转到指定路径
this.$router.push('/home');

// 跳转到命名路由并传递参数
this.$router.push({ name: 'user', params: { userId: 123 }});

// 跳转并替换当前历史记录（无后退）
this.$router.replace('/login');

// 前进或后退历史记录
this.$router.go(1); // 前进一步
this.$router.go(-1); // 后退一步

动态路由跳转

动态路由允许通过参数跳转到不同页面，例如用户详情页。

// 路由配置
{
  path: '/user/:id',
  name: 'user',
  component: UserDetail
}

// 跳转时传递参数
this.$router.push('/user/123');

路由传参

除了动态路由，还可以通过 query 传递参数，参数会显示在 URL 中。

// 跳转并传递查询参数
this.$router.push({ path: '/search', query: { keyword: 'vue' }});

// 目标页面接收参数
this.$route.query.keyword; // 'vue'

导航守卫控制跳转

可以通过导航守卫在跳转前进行权限校验或其他逻辑处理。

router.beforeEach((to, from, next) => {
  if (to.meta.requiresAuth && !isAuthenticated) {
    next('/login');
  } else {
    next();
  }
});

使用 window.location 原生跳转

虽然不推荐，但在某些场景下可以直接使用原生方法跳转。

window.location.href = '/home';

总结

• 声明式导航使用 <router-link>，适合模板中的静态跳转。
• 编程式导航通过 this.$router.push 或 replace，适合动态逻辑跳转。
• 动态路由和查询参数适用于传递数据。
• 导航守卫可用于全局或局部跳转控制。