vue3使用js代码跳转页面

Question

vue3使用js代码跳转页面
报错信息

[Vue warn]: inject() can only be used inside setup() or functional components.

if (state){
      const router=useRouter()
      router.push({ path:'/MyHome'});
    }

Answer 1

晚上好🌙🌙🌙
本答案参考ChatGPT-3.5

问题描述：在vue3中，使用js代码跳转页面时出现了报错信息：“[Vue warn]: inject() can only be used inside setup() or functional components.”

解决方案：

1. 报错原因：出现这个错误的原因是因为在 Vue3 中，官方提倡使用 Composition API 编写代码，component.options 初始化器中的代码只能在 setup 函数中设置。

2. 解决方案：因此，要解决这个问题，你需要做如下的修改：

① 将代码移到 setup 函数中。在 setup 函数中，我们可以使用使用插件useRouter进行页面跳转。

setup() {
  const router = useRouter();
  if (state) {
    router.push({ path: '/MyHome' });
  }
}

② 使用异步函数，将代码包装在 nextTick() 函数中。

import { nextTick, useRouter } from 'vue';
export default {
  created() {
    if (state) {
      nextTick(() => {
        const router = useRouter();
        router.push('MyHome');
      });
    }
  }
}

1. 修改后的代码：

import { nextTick, useRouter } from 'vue';
const state=true;
export default {
  created() {
    if (state) {
      nextTick(() => {
        const router = useRouter();
        router.push('MyHome');
      });
    }
  }
}