vue-14（使用 ‘router.push‘ 和 ‘router.replace‘ 进行编程导航）

使用 ‘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 successfullyconsole.log('Navigation to dashboard completed');}, () => {// Navigation abortedconsole.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 processawait new Promise(resolve => setTimeout(resolve, 1000));// Replace the current route with the dashboard routerouter.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
历史记录堆栈	向历史记录堆栈添加新条目	替换历史记录堆栈中的当前条目
后退按钮	允许导航回上一页	阻止导航返回上一页
使用案例	常规导航， 添加到历史记录	登录/注销后重定向，阻止返回导航