【愚公系列】《循序渐进Vue.js 3.x前端开发实践》057-Vue Router的页面导航

🚀前言

在现代 web 应用中，用户体验的流畅性与页面导航的高效性息息相关。作为一款优秀的前端框架，Vue.js 通过 Vue Router 提供了强大的路由管理功能，使得单页面应用（SPA）的开发变得更加简单和直观。在 Vue Router 的帮助下，开发者可以轻松实现页面间的导航，提升应用的可用性与用户满意度。

本文将深入探讨 Vue Router 的页面导航功能，重点介绍如何配置路由、实现路由跳转以及管理路由状态。我们将通过具体实例来展示如何在 Vue 应用中灵活运用导航视图、导航守卫等特性，让页面之间的切换更加顺畅。同时，我们也会分享一些最佳实践，帮助你在项目中更好地组织路由结构。

🚀一、Vue Router的页面导航

在 Vue Router 中，导航通常指的是在不同页面之间的跳转和切换操作。Vue Router 提供了 <router-link> 组件来实现导航，但除了这种方式外，我们还可以通过编程的方式来控制路由跳转。编程式导航方式让你在任何地方通过方法调用来控制路由，而不仅限于 UI 交互。

🔎1.路由跳转与导航历史控制

🦋1.1 使用路由方法实现编程式导航

当你成功地在 Vue 应用中注册了路由后，你可以通过路由对象来控制页面的跳转。在 Vue 组件中，你可以使用 useRouter 钩子获取 Vue Router 的实例，并通过路由对象的方法来进行跳转操作。

☀️1.1.1 使用 router.push 方法

router.push 方法是 Vue Router 中常用的编程式导航方式，能够将一个新的路由记录推送到历史栈中。用户可以通过浏览器的返回按钮回到上一个路由。

代码示例：

<script setup>
import { useRouter } from 'vue-router';  // 导入 useRouter
const router = useRouter();

function toUser() {
  router.push({ path: '/user/小王' });  // 使用路径跳转到用户中心页面
}
</script>

<template>
  <h1>Hello World</h1>
  <el-button type="primary" @click="toUser">用户中心</el-button>
  <router-view></router-view>  <!-- 渲染匹配到的组件 -->
</template>

在上面的代码中，我们使用了一个按钮 <el-button> 来代替传统的 <router-link> 组件，并在按钮的点击事件中通过 router.push() 方法跳转到 /user/小王 页面。push() 方法的参数是一个对象，可以指定 URL 路径。

☀️1.1.2 使用路由名称加参数

除了直接使用路径进行导航，你还可以使用路由的名称进行跳转。当定义路由时，可以通过 name 属性为路由命名，这样在跳转时就能使用路由的名称来导航，而不是硬编码路径。

代码示例：

首先，定义路由时需要指定 name 属性：

const routes = [
  {
    path: '/user/:username',
    name: 'user',  // 给路由指定名称
    component: User
  }
];

然后在编程式导航中，使用 name 和 params 来动态生成 URL 路径：

router.push({ name: 'user', params: { username: '小王' } });

☀️1.1.3 使用查询参数进行跳转

除了路径参数外，Vue Router 还支持通过 query 参数传递 URL 查询字符串（例如：/user?name=xixi）。

代码示例：

router.push({ path: '/user', query: { name: 'xixi' } });

这种方式将会生成 URL /user?name=xixi。

☀️1.1.4 push 方法返回 Promise

router.push() 方法本身返回一个 Promise 对象，你可以通过 .then() 或 .catch() 来处理跳转后的逻辑，确保在跳转成功后执行某些操作。

代码示例：

router.push({ name: 'user', params: { username: '小王' } })
  .then(() => {
    // 路由跳转成功后的逻辑
    console.log('路由跳转成功');
  })
  .catch((error) => {
    // 处理跳转失败的情况
    console.error('跳转失败', error);
  });

🦋1.2 导航历史控制

当我们使用 <router-link> 组件或 router.push() 方法进行页面跳转时，新的路由会被加入到浏览器的历史栈中。这意味着，用户可以通过浏览器的前进和后退按钮进行导航。

然而，在一些特定的场景下，我们可能不希望将当前页面添加到历史栈中，这时可以使用 replace 参数或者直接调用 router.replace() 方法来跳转。这样，跳转到的新页面会替换掉当前页面，当前页面的历史记录会被删除。

☀️1.2.1 使用 replace 参数进行跳转

你可以在 router.push 中设置 replace: true，这样会直接替换当前页面的路由记录，而不会向历史栈中添加新记录。

router.push({ path: '/user/小王', replace: true });

相当于调用 router.replace() 方法，效果相同。

☀️1.2.2 使用 router.replace() 方法

router.replace() 是 Vue Router 提供的一个方法，用于跳转并替换当前路由记录。这样做的结果是，当前路由不会被加入到浏览器历史栈中，用户无法通过浏览器的返回按钮返回到这个页面。

router.replace({ path: '/user/小王' });

☀️1.2.3 使用 router.go() 方法控制导航历史

Vue Router 还提供了一个 router.go() 方法，允许你直接跳转到历史栈中的某个位置。这个方法接受一个整数参数，正数表示向前跳转，负数表示向后跳转。

• router.go(1)：跳转到前进 1 个记录
• router.go(-1)：跳转到后退 1 个记录
• router.go(3)：跳转到前进 3 个记录
• router.go(-3)：跳转到后退 3 个记录

代码示例：

router.go(1);  // 跳转到下一个页面
router.go(-1); // 跳转到上一个页面

🦋1.3 总结

• 编程式导航：通过 router.push() 和 router.replace() 方法，开发者可以在任何地方编程式地控制路由跳转，不仅限于 UI 元素（如 <router-link>）的交互。
• 路由跳转方式：可以使用路径、路由名称、查询参数等多种方式进行路由跳转。
• 控制历史栈：通过 replace 参数或者 router.replace() 方法，可以在不添加新记录的情况下进行跳转，避免影响历史栈。
• 历史栈控制：使用 router.go() 方法可以灵活控制前进或后退到指定的历史记录位置。

这些方法和技巧为 Vue Router 提供了强大的路由控制能力，能够在复杂的单页面应用（SPA）中提供流畅的用户体验和灵活的页面导航逻辑。