vue路由实现跳转

Vue 路由跳转的实现方式

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

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

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

<router-link> 会自动渲染为 <a> 标签，to 属性支持路径字符串或路由配置对象。

编程式导航（在 JavaScript 中调用方法）

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

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

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

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

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

路由传参方式

• params 传参：需在路由配置中定义参数名

  // 路由配置
  { path: '/user/:userId', name: 'user', component: User }
  
  // 跳转时传递
  this.$router.push({ name: 'user', params: { userId: 123 } });

• query 传参：参数显示在 URL 中

  this.$router.push({ path: '/user', query: { id: 123 } });
  // URL 显示为 /user?id=123

路由守卫控制跳转

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

// 路由独享守卫
{
  path: '/admin',
  component: Admin,
  beforeEnter: (to, from, next) => {
    // 校验逻辑
  }
}

动态路由匹配

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

// 组件中获取参数
this.$route.params.id

命名视图跳转

this.$router.push({
  name: 'dashboard',
  params: { userId: 123 },
  query: { plan: 'premium' }
})

注意事项

• 编程式导航在 Vue 3 组合式 API 中需要通过 useRouter 获取路由实例：

  import { useRouter } from 'vue-router';
  const router = useRouter();
  router.push('/home');

• 路由跳转时要注意参数类型匹配，避免因参数错误导致导航失败
• 对于需要权限控制的路由，建议使用路由守卫进行统一处理