[Vue]编程式导航

在 Vue 中，编程式导航是通过 JavaScript 代码（而非 <router-link> 标签）动态控制路由跳转的核心方式。这个方法依赖于 Vue Router 提供的 API，能更灵活地处理复杂场景（如异步操作、条件跳转等）。

---

一、核心方法

Vue Router 提供了以下方法实现编程式导航：

方法	作用
router.push()	跳转新页面，会向浏览器历史记录添加新条目（可后退）
router.replace()	替换当前页面，不会留下历史记录（不可后退）
router.go(n)	前进/后退 n 步（正数前进，负数后退）
router.back()	后退一步（等价于 router.go(-1)）
router.forward()	前进一步（等价于 router.go(1)）

---

二、router.push() 详解

这是最常用的方法，支持多种参数格式：

1. 路径字符串

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

2. 对象描述（推荐）

// 通过路径跳转
this.$router.push({ path: '/user' });// 通过命名路由跳转（需在路由配置中定义 name）
this.$router.push({ name: 'UserProfile', params: { userId: 123 } // 动态参数（需路由配置占位符）
});

3. 携带参数

• query 参数（URL 可见，适合非敏感数据）：

  this.$router.push({path: '/user',query: { id: 1, name: '王博涵' }
  });
  // URL: /user?id=1&name=John
  

• params 参数（需路由配置占位符，URL 更简洁）：

  // 路由配置
  { path: '/user/:userId', name: 'User', component: User }// 跳转代码
  this.$router.push({name: 'User', // 必须使用命名路由params: { userId: 123 }
  });
  // URL: /user/123
  

---

三、router.replace() 使用

与 push 类似，但不会留下历史记录：

// 替换当前页面（不可后退）
this.$router.replace({ path: '/login' });

---

四、router.go() 控制历史记录

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

---

五、动态路由参数处理

在目标组件中，通过 $route.params 或 props 接收参数：

1. 通过 $route 获取

// 目标组件中
export default {mounted() {const userId = this.$route.params.userId;console.log(userId); // 123}
}

2. 通过 props 解耦（推荐）

// 路由配置中启用 props
{ path: '/user/:userId', component: User, props: true 
}// 目标组件声明 props
export default {props: ['userId'],mounted() {console.log(this.userId); // 123}
}

---

六、高级用法

1. 异步跳转处理

this.$router.push('/target').catch(error => {// 处理导航错误（如重复跳转同一路由）if (error.name === 'NavigationDuplicated') {console.log('重复跳转');}
});

2. 导航守卫结合

在全局或路由独享守卫中控制跳转：

// 全局前置守卫
router.beforeEach((to, from, next) => {if (to.path === '/admin' && !isAdmin) {next('/login'); // 中断跳转并重定向} else {next();}
});

---

七、注意事项

1. params 必须使用 name：若使用 params，跳转时必须通过 name 而非 path。
2. 路由配置匹配：确保路由路径中包含参数占位符（如 /user/:id）。
3. 可选参数：在路由路径中使用 ? 修饰符定义可选参数：

   { path: '/user/:id?' } // id 为可选
   

---

八、完整示例

1. 路由配置

// router.js
import Vue from 'vue';
import VueRouter from 'vue-router';Vue.use(VueRouter);const routes = [{path: '/user/:userId',name: 'User',component: () => import('./User.vue'),props: true}
];const router = new VueRouter({ routes });
export default router;

2. 跳转代码

// 在组件方法中
methods: {navigateToUser() {this.$router.push({name: 'User',params: { userId: 123 }});}
}

3. 目标组件

<!-- User.vue -->
<template><div>User ID: {{ userId }}</div>
</template><script>
export default {props: ['userId']
};
</script>

---