Vue 3 中获取 的多种方法_然后在需要获取_这种方法在组合式 API 中用得特别多能让代码更加简洁
作者：机器人技术佬 |
发布时间：2025-06-20 |
Vue 3 中获取 router 的多种方法
在 Vue 3 中，获取 router 实例的方式不止一种，这里就来聊聊几种常见的方法。
一、通过 Vue Router 实例获取
首先，你需要确保你的 Vue 3 项目已经安装并配置了 Vue Router。在 main.js 或 main.ts 中创建并配置 Router 实例，然后在需要获取 Router 实例的地方引入并使用该实例。
简单来说，就像这样：
```javascript
import { createRouter, createWebHistory } from 'vue-router';
const router = createRouter({
history: createWebHistory(),
routes: [
{ path: '/', component: Home },
{ path: '/about', component: About }
]
});
```
二、通过 setup 函数中的 useRouter 钩子函数获取
Vue 3 引入了 Composition API，其中 useRouter 钩子函数可以帮助我们获取 Router 实例。这种方法在组合式 API 中用得特别多，能让代码更加简洁。
在 setup 函数中使用 useRouter 钩子，示例如下：
```javascript
import { useRouter } from 'vue-router';
const router = useRouter();
```
三、在组件内部通过 this.$router 获取
如果你还在使用传统的 Vue 2.x 开发风格，可以通过 this.$router 来获取 Router 实例。
在组件内部获取 Router 实例，示例如下：
```javascript
export default {
methods: {
navigateTo(url) {
this.$router.push(url);
}
}
}
```
四、不同方法的优缺点对比
下面是一个简单的表格，对比了三种方法的优缺点：
| 方法 | 优点 | 缺点 |
| --- | --- | --- |
| Vue Router 实例获取 | 简单直接，适合全局使用 | 需要手动配置，不适合组件内使用 |
| useRouter 钩子函数获取 | 适合组合式 API，代码更简洁 | 仅限于 Composition API |
| 组件内部通过 this.$router 获取 | 适合选项式 API，易于理解 | 不适合组合式 API，代码不够简洁 |
五、实例说明与数据支持
这里我们可以通过几个示例代码来展示如何使用这些方法。
```javascript
// 通过 Vue Router 实例获取
import { createRouter, createWebHistory } from 'vue-router';
const router = createRouter({
history: createWebHistory(),
routes: [
{ path: '/', component: Home },
{ path: '/about', component: About }
]
});
// 通过 setup 函数中的 useRouter 钩子函数获取
import { useRouter } from 'vue-router';
const router = useRouter();
// 在组件内部通过 this.$router 获取
export default {
methods: {
navigateTo(url) {
this.$router.push(url);
}
}
}
```
六、
在 Vue 3 中获取 Router 实例的方法有多种，选择哪种取决于你的项目需求和你的个人喜好。不过，这里有一些建议：
- 如果你在使用组合式 API，建议优先选择 useRouter 钩子函数，这样能让你的代码更加简洁和现代化。
- 在大型项目中，合理组织和管理路由是非常重要的，选择合适的方法可以提高开发效率和代码的可维护性。