在非组件环境中使用 vue router 跳转需直接导入已创建的路由实例（如 import router from '@/router'），调用 router.push() 等方法；注意确保路由已初始化，避免使用 window.location.href。
在非组件环境中（比如工具函数、axios拦截器、store action、普通JS模块）使用 Vue Router 跳转，核心是**获取已创建的路由实例**，而非依赖 this.$router（该属性仅在组件实例中可用）。
直接导入并使用路由实例
Vue Router 的路由实例通常导出为一个单例对象（如 src/router/index.js 中 export default router），只要确保它已被正确创建并挂载，就可以在任意地方导入使用：
- 确保路由文件导出的是可复用的实例（Vue 3 推荐用
createRouter创建后直接导出） - 在工具函数中直接
import router from '@/router' - 调用
router.push()、router.replace()或router.go()等方法
常见使用场景示例
1. Axios 响应拦截器中跳转登录页
当后端返回 401 时，跳转到登录页：
import router from '@/router'
import axios from 'axios'
axios.interceptors.response.use(
res => res,
err => {
if (err.response?.status === 401) {
router.push({ name: 'Login', query: { redirect: router.currentRoute.value.fullPath } })
}
return Promise.reject(err)
}
)
2. 独立工具函数中触发跳转
使用 `@ainative/vue-sdk` 为 Vue 3 应用添加 AI 聊天功能。适用于以下场景：(1) 安装 `@ainative/vue-sdk`，(2) 在 Vue 组件中使用 `useChat` 组合式函数，(3) 提供……
例如封装一个权限校验后跳转的函数：
// utils/auth.js
import router from '@/router'
export function redirectToLogin() {
router.replace({
path: '/login',
query: { from: window.location.pathname }
})
}
注意事项
必须保证路由实例已初始化完成——不能在 main.js 的 createApp().use(router) 之前导入并使用它，否则 router 可能未就绪或 currentRoute 为 undefined。
若在 setup() 外或组合式函数中需要访问路由状态（如当前路径），可导入 useRoute 的响应式对象，但注意：该 Hook **只能在组件 setup 或 onBeforeRouteXXX 钩子中调用**；非组件环境请改用 router.currentRoute.value 获取当前路由信息。
不推荐的替代方案
避免手动操作 window.location.href 或 history.pushState，这会绕过 Vue Router 的导航守卫、滚动行为、路由缓存等机制，导致应用状态不一致。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
