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

在Vue3中，setup()函数是组件的核心，它是Vue Composition API的一部分。它允许你使用ref、reactive、computed等函数来创建响应式数据、计算属性等。而inject函数是用来从父组件中注入依赖的。在Vue3中，inject只能在setup()函数内部使用，这是由于Vue的响应式原理所决定的。如果你在组件的其它地方（例如在mounted或created钩子中）使用inject，就会收到上述的警告信息。
要解决这个问题，你需要确保在setup()函数内部使用inject()。以下是一个示例：

import { inject } from 'vue';
import { useRouter } from 'vue-router';
export default {
setup() {
const router = inject('router'); // 在 setup() 内部使用 inject()
const route = useRouter(); // 使用 vue-router 的 useRouter hook
// 其他组件逻辑...
}
}

在这个例子中，我们首先从’vue’中导入了inject函数，然后从’vue-router’中导入了useRouter钩子。在组件的setup()函数中，我们使用inject()函数来从父组件中注入一个名为’router’的依赖，然后我们可以用这个依赖来调用useRouter()钩子。
请注意，如果你在父组件中没有使用provide函数提供’router’依赖，那么在子组件中尝试使用inject()将会失败，因为依赖无法找到。所以，确保你在父组件的setup()函数中使用provide()函数来提供依赖。例如：

import { provide } from 'vue';
import { createRouter, createWebHistory } from 'vue-router';
// 创建路由配置...
const router = createRouter({ /* 路由配置 */ });
const history = createWebHistory();
router.use(history);
provide('router', router); // 在父组件中提供 'router' 依赖

在这个例子中，我们在父组件的setup()函数中创建了一个路由器实例，并通过provide()函数提供了一个名为’router’的依赖。这样，子组件就可以通过inject()函数注入这个依赖了。
总的来说，要解决[Vue warn]: inject() can only be used inside setup() or functional的警告，你需要确保在Vue3的组件中使用inject()函数时，它被包含在setup()函数内部。同时，确保你在父组件中提供了相应的依赖。遵循这些步骤应该可以帮助你解决这个问题。