编程式导航和声明式导航（RouterLink）

✅编程式导航 vs RouterLink导航

在 Vue 3 中，我们常用两种方式实现页面跳转：编程式导航 和 声明式导航（RouterLink） ，它们的区别如下：

1️⃣ 使用方式不同：

• 编程式导航：
  通过 useRouter() 获取路由实例，在 JavaScript 逻辑中调用 .push() 或 .replace() 方法跳转。

  import { useRouter } from 'vue-router';
  
  const router = useRouter();
  router.push({ name: 'Home' });
  

• RouterLink导航（声明式） ：
  在模板中使用 <RouterLink> 组件，适用于静态页面链接跳转。你点我就跳。

  <RouterLink :to="{ name: 'Home' }">Go Home</RouterLink>
  

2️⃣ 应用场景不同：

• 编程式导航适用于需要符合条件才能跳的场景，比如倒计时结束后跳转页面。
• RouterLink适用于静态导航结构，比如菜单栏、底部导航等。

3️⃣ 参数传递支持：

• 两种方式都支持传递 路径参数（params） 和 查询参数（query） 。
• 编程式导航传参更灵活，尤其是在组合式 API 中与逻辑结合更紧密。

4️⃣ 示例对比：

// 编程式导航（组合式 API 中）
const router = useRouter();
router.push({ name: 'User', params: { id: 123 } });

<!-- RouterLink导航 -->
<RouterLink :to="{ name: 'User', params: { id: 123 } }">User Page</RouterLink>

✅ 总结：

在 Vue 3 中，编程式导航更适合复杂逻辑跳转（如登录后跳转、权限控制），RouterLink 更适合页面模板中静态导航结构。实际开发中应根据业务场景合理选择。