VueJS 3 / 路由器 / 带有推送的重定向：未捕获（承诺中）类型错误：无法读取未定义的属性（读取“推送”）

Posted 2023-02-22

【中文标题】VueJS 3 / 路由器 / 带有推送的重定向：未捕获（承诺中）类型错误：无法读取未定义的属性（读取“推送”）

【英文标题】：VueJS 3 / Router / redirect with push : Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'push')

【发布时间】：2021-12-25 04:04:38

【问题描述】：

生日，

我写了一个脚本来登录，在脚本的最后我想重定向到一个新的视图（url：http://mywebsite/Home） 我有这个脚本可以登录：（文件：./component/log.vue）

<script setup lang="ts">
import  computed, ref  from "vue";
import  Form, Field, ErrorMessage  from "vee-validate";
import store from '../store/index';
import router from "vue-router";
import * as yup from "yup";


const schema = yup.object().shape(
  email: yup.string().required("Email obligatoire"),
  password: yup.string().required("Password obligatoire"),
);

const myStore: any = store;
const myRouter: any = router;
let loading: any = ref(false);
let message: any = ref('');

// fonction de login
const loggedIn = computed(() => myStore.state.auth.status.loggedIn);
if (loggedIn.value) 
  myRouter.push('../views/Home.vue');


// envoi des données pour se logger
const handleLogin = (user) => 
  loading = true;

  myStore.dispatch("auth/login", user).then(
    () => 
      myRouter.push('../views/Home.vue');
    ,
    (error) => 
      loading = false;
      message =
        (error.response &&
          error.response.data &&
          error.response.data.message) ||
        error.message ||
        error.toString();
    
  );


</script>

但看起来“推送”有错误 所以我阅读了文档：https://next.router.vuejs.org/ 并尝试一些东西，但没有任何效果。

我有这个错误：

Log.vue?320d:36 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'push')
at setup (Log.vue?320d:36)
at callWithErrorHandling (runtime-core.esm-bundler.js?5c40:6701)
at setupStatefulComponent (runtime-core.esm-bundler.js?5c40:6310)
at setupComponent (runtime-core.esm-bundler.js?5c40:6266)
at mountComponent (runtime-core.esm-bundler.js?5c40:4119)
at processComponent (runtime-core.esm-bundler.js?5c40:4094)
at patch (runtime-core.esm-bundler.js?5c40:3689)
at mountChildren (runtime-core.esm-bundler.js?5c40:3885)
at mountElement (runtime-core.esm-bundler.js?5c40:3794)
at processElement (runtime-core.esm-bundler.js?5c40:3766)

你能告诉我为什么吗？

我用的是新版本，所以：Vue 3 with TS , Router V4, etc.

感谢您的帮助。

【参考方案1】：

如果其他人有同样的问题，我找到了解决方案：

你必须导入：

import  useRouter  from 'vue-router'

然后：

myRouter = useRouter();

就是这样。

所以最后的代码是：

<script setup lang="ts">
import  computed, ref  from "vue";
import  Form, Field, ErrorMessage  from "vee-validate";
import store from '../store/index';
import  useRouter  from "vue-router";
import * as yup from "yup";


const schema = yup.object().shape(
  email: yup.string().required("Email obligatoire"),
  password: yup.string().required("Password obligatoire"),
);

const myStore: any = store;
const myRouter: any = useRouter();
let loading: any = ref(false);
let message: any = ref('');

// fonction de login
const loggedIn = computed(() => myStore.state.auth.status.loggedIn);
if (loggedIn.value) 
  myRouter.push('/Home');


// envoi des données pour se logger
const handleLogin = (user) => 
  loading = true;

  myStore.dispatch("auth/login", user).then(
    () => 
      myRouter.push('/Home');
    ,
    (error) => 
      loading = false;
      message =
        (error.response &&
          error.response.data &&
          error.response.data.message) ||
        error.message ||
        error.toString();
    
  );


</script>