[Vue]编程式导航

在 Vue 中，编程式导航是通过 JavaScript 代码（而非 标签）动态控制路由跳转的核心方式。这个方法依赖于 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. 目标组件

---