vue实现路由跳转

Vue 路由跳转的实现方式

在 Vue 中，路由跳转可以通过 vue-router 实现，以下是几种常见的方法：

声明式导航（模板中使用 <router-link>）

通过 <router-link> 组件实现跳转，适合在模板中使用：

<router-link to="/home">跳转到首页</router-link>
<router-link :to="{ name: 'user', params: { id: 123 }}">用户页</router-link>

编程式导航（通过 router 实例）

在 JavaScript 代码中调用 router 方法实现跳转：

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

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

// 替换当前路由（不保留历史记录）
this.$router.replace('/login');

// 返回上一页
this.$router.go(-1);

路由传参的方式

1. 路径参数（动态路由）
   在路由配置中定义动态字段：

   { path: '/user/:id', component: User }

   跳转时传递参数：

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

2. 查询参数（query）
   通过 URL 查询字符串传参：

   this.$router.push({ path: '/search', query: { keyword: 'vue' } });

   目标 URL 会变为 /search?keyword=vue。

3. 命名路由 + params
   通过路由名称和 params 传参：

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

路由导航守卫

可以在跳转前后执行逻辑（如权限检查）：

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

注意事项

• 使用 params 时需确保路由配置了动态字段（如 :id），否则参数会丢失。
• query 参数会显示在 URL 中，适合非敏感数据。
• 编程式导航通常在方法或生命周期钩子中调用。