【vue3|第24期】深入了解useRouter：方法、属性与使用示例

news2025/1/11 4:06:42

日期：2024年8月20日
作者：Commas
签名：(ง •_•)ง 积跬步以致千里,积小流以成江海……
注释：如果您觉得有所帮助，帮忙点个赞，也可以关注我，我们一起成长；如果有不对的地方，还望各位大佬不吝赐教，谢谢^ - ^
1.01³⁶⁵ = 37.7834；0.99³⁶⁵ = 0.0255
1.02³⁶⁵ = 1377.4083；0.98³⁶⁵ = 0.0006

说在最前面：本文 vue3 的示例代码，在没有另外声名的情况下，均采用 <script setup> 组合式代码风格，风格统一，避免混乱，请各位新老食客放心食用哈 ^ _ ^

文章目录

一、前言
二、 useRouter 是什么？
三、useRouter 的方法与属性
- 1、方法
- 2、属性
四、如何使用 useRouter？
- 1、基础示例：基本导航
- 2、实际应用：按钮导航
五、结语

在这里插入图片描述

一、前言

在 Vue3 的世界中，Composition API 的引入为开发者带来了更加灵活和强大的组件编写方式。Vue Router，作为 Vue.js 的官方路由管理器，也紧跟步伐，提供了 useRouter 钩子，让我们可以在 setup 函数、语法糖中使用路由实例。本文将详细介绍 useRouter 的方法和属性，并通过实际示例展示如何在 Vue3 组件中使用它。

二、 useRouter 是什么？

useRouter 是 Vue Router 4.x 版本中的一个 Composition API。它使得在 Vue3 组件的 setup 函数中能够访问路由实例，从而允许我们进行路由导航、获取当前路由信息等操作。

三、useRouter 的方法与属性

useRouter 提供了一系列方法和属性，以下是其中一些常用的：

1、方法

导航到一个新的 URL，并返回一个 Promise。

push(to: RouteLocationRaw): Promise<NavigationFailure | void | undefined>;

导航到一个新的 URL，但不会留下历史记录，并返回一个 Promise。

replace(to: RouteLocationRaw): Promise<NavigationFailure | void | undefined>;

在 history 记录中前进或后退指定的步数。
```
go(delta: number): void;
```
导航到 history 记录的上一个页面。
```
back(): ReturnType<Router['go']>;
```
导航到 history 记录的下一个页面。
```
forward(): ReturnType<Router['go']>;
```
返回包含所有路由记录的数组。
```
getRoutes(): RouteRecord[]
```

解析给定的目标位置，并返回一个完成的 location 对象。

resolve(to: RouteLocationAsString | RouteLocationAsRelative | RouteLocationAsPath, currentLocation?: RouteLocationNormalizedLoaded): RouteLocationResolved;

动态添加路由。

addRoute(route: RouteRecordRaw): () => void;

动态移除路由。

removeRoute(name: NonNullable<RouteRecordNameGeneric>): void;

判断指定路由是否存在

hasRoute(name: NonNullable<RouteRecordNameGeneric>): boolean;

获取路由列表
```
getRoutes(): RouteRecord[];
```
删除所有路由
```
clearRoutes(): void;
```

2、属性

当前路由的响应式引用。

currentRoute: Ref<RouteLocationNormalizedLoaded>;

路由实例的配置选项。
```
options: RouterOptions;
```

四、如何使用 useRouter？

要在组件中使用 useRouter，首先确保你已经在项目中安装并配置了 Vue Router。下面是一个简单的使用示例：

1、基础示例：基本导航

<scriot setup>
import { useRouter } from 'vue-router';

const router = useRouter();

// 导航到主页
function navigateToHome() {
  router.push('/home');
}

// 替换当前页面，不留下历史记录
function replaceToProfile() {
  router.replace('/about');
}

// 后退一步
function goBack() {
  router.back();
}

// 前进一步
function goForward() {
  router.forward();
}

// 获取当前路由信息
const route = router.currentRoute.value;

</script>

在这个例子中，我们定义了几个方法来使用 router 实例进行页面导航。例如，navigateToHome 方法会将用户导航到主页，而 replaceToProfile 方法会将当前页面替换为用户个人资料页面，且不会在浏览器的历史记录中留下记录。goBack 和 goForward 方法允许用户在浏览器的历史记录中后退和前进。

2、实际应用：按钮导航

假设我们有一个按钮，用户点击它时，我们想导航到一个名为 /about 的路由。以下是 HTML 模板和相应的 setup 函数：

<template>
  <button @click="navigateToAbout">关于</button>
</template>

在组件的 setup 函数中，我们可以这样定义 navigateToAbout 方法：

<script setup>
import { useRouter } from 'vue-router';

const router = useRouter();

function navigateToAbout() {
  router.push('/about');
}
</script>

现在，当用户点击“关于我们”按钮时，navigateToAbout 方法将被触发，并通过 Vue Router 导航到 /about 页面。

五、结语

在 Vue Router 中，我们通常使用 router 实例来进行编程式导航。router 实例提供了 push、replace、go、back 和 forward 等方法来实现不同类型的导航操作。通过这些方法，我们可以在应用的任何地方精确地控制路由跳转，从而提供更好的用户体验。

参考文章：