使用 ‘router.push’ 和 ‘router.replace’ 进行编程导航

编程导航是使用 Vue Router 构建动态和交互式 Web 应用程序的一个重要方面。它允许您根据应用程序逻辑、用户作或特定条件控制用户的导航流。您可以使用 router.push 和 router.replace 方法以编程方式导航到不同的路由，而不是仅仅依赖 <router-link> 组件。本章将深入探讨这些方法的复杂性，探索它们的功能、用例和差异，使你具备在 Vue 应用程序中实现高级导航策略的知识。

router.push

router.push 方法是在 Vue Router 中以编程方式导航到新 URL 的主要方式。它会在浏览器的历史记录堆栈中添加一个新条目，允许用户使用浏览器的后退按钮导航回上一页。

基本用法

使用 router.push 的最简单方法是传递一个字符串，表示你想要导航到的路径：

import { useRouter } from 'vue-router';

export default {
  setup() {
    const router = useRouter();

    const goToAbout = () => {
      router.push('/about');
    };

    return {
      goToAbout
    };
  },
  template: `
    <button @click="goToAbout">Go to About Page</button>
  `
};

在此示例中，单击该按钮会将用户导航到 /about 路由。浏览器的历史记录将更新，允许用户返回上一页。

使用命名路由

您可以使用命名路由，而不是直接指定路径，这可以使您的代码更具可读性和可维护性。假设您有一个路由定义如下：

import { createRouter, createWebHistory } from 'vue-router';

const routes = [
  {
    path: '/users/:id',
    name: 'user',
    component: User
  }
];

const router = createRouter({
  history: createWebHistory(),
  routes
});

export default router;

然后，您可以使用其名称导航到此路由：

import { useRouter } from 'vue-router';

export default {
  setup() {
    const router = useRouter();

    const goToUser = (userId) => {
      router.push({ name: 'user', params: { id: userId } });
    };

    return {
      goToUser
    };
  },
  template: `
    <button @click="goToUser(123)">Go to User 123</button>
  `
};

这种方法是有益的，因为如果更改 /users/：id 路由的路径，则只需在路由定义中更新它，而无需在导航到它的每个位置更新它。

传递参数

您可以使用 params 属性将参数传递给路由：

import { useRouter } from 'vue-router';

export default {
  setup() {
    const router = useRouter();

    const goToProduct = (productId) => {
      router.push({ path: `/products/${productId}` }); // Or { name: 'product', params: { id: productId } } if you have a named route
    };

    return {
      goToProduct
    };
  },
  template: `
    <button @click="goToProduct(456)">Go to Product 456</button>
  `
};

这将导航到 /products/456。如果您使用的是命名路由， 则 params 属性是传递路由参数的首选方法。

传递查询参数

您还可以使用 query 属性传递查询参数：

import { useRouter } from 'vue-router';

export default {
  setup() {
    const router = useRouter();

    const goToSearch = (searchTerm) => {
      router.push({ path: '/search', query: { q: searchTerm } });
    };

    return {
      goToSearch
    };
  },
  template: `
    <button @click="goToSearch('vue router')">Search for Vue Router</button>
  `
};

这将导航到 /search？q=vue%20router。

处理 onComplete 和 onAbort 回调

router.push 方法还接受可选的 onComplete 和 onAbort 回调：

import { useRouter } from 'vue-router';

export default {
  setup() {
    const router = useRouter();

    const goToDashboard = () => {
      router.push({ path: '/dashboard' }, () => {
        // Navigation completed successfully
        console.log('Navigation to dashboard completed');
      }, () => {
        // Navigation aborted
        console.error('Navigation to dashboard aborted');
      });
    };

    return {
      goToDashboard
    };
  },
  template: `
    <button @click="goToDashboard">Go to Dashboard</button>
  `
};

当导航成功时执行 onComplete 回调，当导航中止时（例如，由导航守卫）执行 onAbort 回调。随着 async/await 和基于 promise 的导航的引入，这些回调现在不太常用。

将 async/await 与 router.push 一起使用

router.push 返回一个 Promise，它允许您使用 async/await 进行更清晰的异步导航处理：

import { useRouter } from 'vue-router';

export default {
  setup() {
    const router = useRouter();

    const goToSettings = async () => {
      try {
        await router.push({ path: '/settings' });
        console.log('Navigation to settings completed');
      } catch (error) {
        console.error('Navigation to settings aborted', error);
      }
    };

    return {
      goToSettings
    };
  },
  template: `
    <button @click="goToSettings">Go to Settings</button>
  `
};

此方法使您的代码更具可读性，更易于推理，尤其是在处理复杂的导航场景时。

了解 router.replace

router.replace 方法类似于 router.push，但它替换浏览器历史堆栈中的当前条目，而不是添加新条目。这意味着用户将无法使用浏览器的后退按钮导航回上一页。

基本用法

router.replace 的基本用法类似于 router.push：

import { useRouter } from 'vue-router';

export default {
  setup() {
    const router = useRouter();

    const goToHome = () => {
      router.replace('/home');
    };

    return {
      goToHome
    };
  },
  template: `
    <button @click="goToHome">Go to Home Page</button>
  `
};

单击该按钮会将用户导航到 /home 路由，但上一页将从浏览器的历史记录中删除。

何时使用 router.replace

router.replace 在您希望阻止用户导航回特定页面的情况下非常有用，例如在成功登录或注销后。

例如，在用户登录后，您可能希望使用 router.replace 将他们重定向到控制面板，以防止他们使用后退按钮导航回登录页面。

import { useRouter } from 'vue-router';

export default {
  setup() {
    const router = useRouter();

    const login = async () => {
      // Simulate login process
      await new Promise(resolve => setTimeout(resolve, 1000));

      // Replace the current route with the dashboard route
      router.replace('/dashboard');
    };

    return {
      login
    };
  },
  template: `
    <button @click="login">Login</button>
  `
};

使用 router.replace 传递参数

与 router.push 一样，router.replace 也支持使用命名路由、params 和 query 传递参数：

import { useRouter } from 'vue-router';

export default {
  setup() {
    const router = useRouter();

    const goToProduct = (productId) => {
      router.replace({ name: 'product', params: { id: productId } });
    };

    return {
      goToProduct
    };
  },
  template: `
    <button @click="goToProduct(789)">Go to Product 789</button>
  `
};

这会将当前路由替换为 /products/789 路由（假设您有一个名为“product”的命名路由，其参数为“id”）。

使用 router.replace 处理 onComplete 和 onAbort

router.replace 也接受 onComplete 和 onAbort 回调，并且可以像 router.push 一样与 async/await 一起使用。

router.push 和 router.replace 之间的区别

特征	router.push	router.replace
历史记录堆栈	向历史记录堆栈添加新条目	替换历史记录堆栈中的当前条目
后退按钮	允许导航回上一页	阻止导航返回上一页
使用案例	常规导航， 添加到历史记录	登录/注销后重定向，阻止返回导航