Vue3 关于router引起的[Vue warn]: inject() can only be used inside setup() or functional

### 解决 Vue Router 中出现的 'window is not defined' 错误 在使用 Vue Router 时，如果遇到 `'window is not defined'` 的错误，通常是因为代码在服务器端渲染（SSR）环境中运行，而 `window` 对象仅在浏览器环境中存在。以下是一些解决方案[^4]。 #### 确保 Vue Router 不在 SSR 中执行 可以通过检测 `process.client` 或类似的标志来确保 Vue Router 的某些逻辑仅在客户端执行。例如： ```javascript if (process.client) { const VueRouter = require('vue-router').default; Vue.use(VueRouter); } ``` #### 使用动态导入避免全局依赖 将与 `window` 相关的代码或库动态导入，可以避免在 SSR 环境中加载这些依赖。例如： ```javascript const routes = [ { path: '/home', component: () => import('@/views/Home.vue'), }, ]; ``` 这种方式确保了组件仅在需要时才被加载，从而避免了在 SSR 环境中提前加载的问题。 #### 在 Nuxt.js 中正确配置 Vue Router 如果使用的是 Nuxt.js 框架，可以通过插件或中间件的方式处理与 `window` 相关的逻辑。例如，创建一个插件文件 `plugins/router.js`，并在其中添加逻辑： ```javascript export default ({ app }, inject) => { if (process.client) { // 客户端特定逻辑 } }; ``` 然后在 `nuxt.config.js` 中注册该插件： ```javascript export default { plugins: [ '~/plugins/router.js', ], }; ``` #### 修改 Vue Router 的安装方式 在 SSR 环境中，可以通过条件判断来避免直接调用 `Vue.use(VueRouter)`。例如： ```javascript if (typeof window !== 'undefined') { Vue.use(VueRouter); const router = new VueRouter({ mode: 'history', routes, }); export default router; } else { // 处理 SSR 环境 } ``` #### 使用虚拟 DOM 替代直接操作 `window` 如果必须在路由切换时操作 `window` 对象，可以考虑使用虚拟 DOM 或其他替代方案。例如，通过 Vuex 或事件总线传递数据，而不是直接操作 `window`。 ```javascript // 替代直接操作 window.location router.push({ path: '/new-path' }); ``` ### 示例代码 以下是一个完整的示例，展示如何在 SSR 环境中安全地使用 Vue Router： ```javascript let VueRouter; if (typeof window !== 'undefined') { VueRouter = require('vue-router').default; Vue.use(VueRouter); const routes = [ { path: '/', component: () => import('@/views/Home.vue') }, { path: '/about', component: () => import('@/views/About.vue') }, ]; const router = new VueRouter({ mode: 'history', routes, }); export default router; } else { console.warn('Vue Router is not initialized in SSR environment.'); } ``` ### 注意事项 - 确保所有与 `window` 相关的逻辑都在客户端执行。 - 动态导入和条件判断是解决 SSR 问题的有效方法。 - 如果使用框架（如 Nuxt.js），遵循其推荐的实践以避免常见问题。