如何使用Vue Router进行页面导航

Vue Router 是 Vue.js 官方推荐的路由管理器，它允许我们通过定义一系列的路由规则，为单页应用 (SPA) 提供页面的导航和视图渲染。在 Vue 应用中实现页面跳转的方式有多种，以下是一些常见的实现方法。

声明式导航

Vue Router 提供了一种声明式导航的方式，即在模板中使用 `` 组件来创建导航链接。

Go to About

当点击这个链接时，`` 会自动调用路由器的 `push` 方法，从而实现跳转到 `/about` 的路由。

编程式导航

除了声明式导航，还可以通过编程的方式实现路由跳转。Vue Router 提供了全局的 `$router` 对象，我们可以使用这个对象来主动跳转。

使用 `push` 方法

// 字符串路径
this.$router.push('/home');

// 对象
this.$router.push({ path: '/home' });

// 命名路由，并带有参数
this.$router.push({ name: 'user', params: { userId: 123 } });

// 带查询参数，结果是 /register?plan=private
this.$router.push({ path: '/register', query: { plan: 'private' } });

使用 `replace` 方法

与 `push` 类似，但 `replace` 不会向 history 添加新记录，而是替换当前记录。

this.$router.replace({ name: 'user', params: { userId: 123 } });

后退操作

如果需要后退，可以使用 `go` 方法。

// 后退一步记录，等同于 history.back()
this.$router.go(-1);

// 前进一步记录
this.$router.go(1);

如何使用Vue Router进行页面导航

路由守卫

在某些情况下，你可能需要在跳转发生之前进行一些验证或者其他逻辑操作，这时可以使用路由守卫。

router.beforeEach((to, from, next) => {
// 可以在这里进行一些逻辑判断
// next() 调用后，路由跳转继续
// next(false) 中断当前路由跳转
if (/* 某些判断 */) {
next();
} else {
next(false);
}
});