当前位置：首页 > news >正文

vue3项目，main.ts中设置router，在各个页面上还用引用vue-router吗

news 2025/8/21 8:18:35

在 Vue 3 项目中，如果你已经在 main.ts 中通过 app.use(router) 将路由实例注册到了全局应用中，那么：

在这里插入图片描述

✅ 结论：

在各个页面组件中，你不需要再“引用” vue-router 来“使用”路由功能，但如果你要在 <script> 中调用路由方法（如 router.push、useRoute、useRouter），则仍需要导入相应的 API。

📌 详细解释

1. 在模板 `<template>` 中可以直接使用 `<router-link>` 和 `$route` / `$router`

因为你在 main.ts 中执行了：

import { createApp } from 'vue'
import { router } from './router'
import App from './App.vue'createApp(App).use(router).mount('#app')

这会将 router 实例通过 app.use() 注册为全局插件，因此：

<router-link> 和 <router-view> 可以直接在模板中使用，无需导入。
在模板中也可以访问 {{ $route }} 或调用 @click="$router.push('/home')"，不需要额外引入。

✅ 示例（无需导入 vue-router）：

<template><div><!-- 1. router-link 直接可用 --><router-link to="/home">首页</router-link><!-- 2. $router 在模板事件中可用 --><button @click="$router.push('/about')">跳转到关于</button><!-- 3. $route 获取当前路由信息 --><p>当前路径: {{ $route.path }}</p></div>
</template><script setup>
// 这里不需要导入 vue-router，模板中已自动注入
</script>

2. 在 `<script setup>` 或 `setup()` 中使用 Composition API 时，需要导入 `useRouter` 和 `useRoute`

Vue 3 的 Composition API 中，useRouter 和 useRoute 是函数，必须显式导入才能使用。

❌ 错误写法（不导入）：

// ❌ 报错：useRouter is not defined
const router = useRouter()
router.push('/home')

✅ 正确写法：

<script setup>
import { useRouter, useRoute } from 'vue-router'const router = useRouter()
const route = useRoute()// 使用
function goToHome() {router.push('/home')
}// 获取当前路由参数
console.log(route.params.id)
</script>

🔁 总结：是否需要引用 `vue-router`？

使用场景	是否需要 `import`	说明
`<template>` 中使用 `<router-link>`、`<router-view>`	❌ 不需要	全局注册后自动可用
`<template>` 中使用 `$router`、`$route`	❌ 不需要	自动注入到模板上下文
`<script setup>` 中使用 `useRouter()`、`useRoute()`	✅ 需要	必须从 `vue-router` 导入函数
`<script setup>` 中使用 `router.push()` 等方法	✅ 需要	前提是先 `import { useRouter }`

💡 小贴士：自动导入（推荐）

你可以使用 unplugin-auto-import 插件，自动导入 vue-router 的常用函数，避免手动写 import。

// vite.config.ts
import AutoImport from 'unplugin-auto-import/vite'export default {plugins: [AutoImport({imports: ['vue', 'vue-router'],dts: 'src/auto-imports.d.ts'})]
}