0

天，

我写了一个脚本来登录，在脚本结束时我想重定向到一个新视图（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 等。

感谢您的帮助。

4

1 回答 1

0

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

您必须导入：

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>

于 2021-11-17T22:48:27.990 回答