如何在 Vue 3 中重定向另一个路由器？（在 Laravel 8 中使用 next.router 和 vue 3）答案

【问题标题】：How to redirect another router in Vue3 ? (used next.router in Laravel 8 with vue3)如何在 Vue 3 中重定向另一个路由器？（在 Laravel 8 中使用 next.router 和 vue 3）
【发布时间】：2021-04-01 00:01:39
【问题描述】：

成功登录后不重定向。收到控制台错误TypeError: Cannot read property 'push' of undefine 这是我的代码。

我正在使用 Laravel 8 在 vue3 中创建 SPA。

    import { ref } from "vue";
    import { useRoute } from "vue-router";
    export default {
        setup() {
            const form = ref(
                {
                    email: "hudson.vilma@example.net",
                    password: "password",
                    isLoading: false,
                },
            );
            const user = ref("");

            function login() {
                axios.get('/sanctum/csrf-cookie').then(response => {
                    axios.post('/login', this.form).then(response => {
                        this.$router.push('/dashboard')
                       // useRoute.push('/dashboard');  
                      //  this.$router.push({ name: "Dashboard" });
                    }).catch(error => console.log(error)); // credentials didn't match
                });
            }
            
            return { form, login, user , useRoute};
        },
    };
</script>

在 app.js 中的 vue &

require('./bootstrap');

import { createApp } from "vue";
import App from "./view/App.vue";

import router from "./router";

const app = createApp(App);
app.use(router);
app.mount("#app");

【问题讨论】：

标签： laravel vue.js vue-router laravel-8 vuejs3

【解决方案1】：

尝试使用useRouter 而不是useRoute 并在设置函数中像const router =useRouter() 一样实例化它：

    import { ref } from "vue";
    import { useRouter } from "vue-router";
    export default {
        setup() {
          const router =useRouter()
            const form = ref(
                {
                    email: "hudson.vilma@example.net",
                    password: "password",
                    isLoading: false,
                },
            );
            const user = ref("");

            function login() {
                axios.get('/sanctum/csrf-cookie').then(response => {
                    axios.post('/login', this.form).then(response => {
                        router.push('/dashboard')
                    
                    }).catch(error => console.log(error)); // credentials didn't match
                });
            }
            
            return { form, login, user ,};
        },
    };
</script>

请注意，this 不能用于组合 API。

【讨论】：

【解决方案2】：

您在setup() 中使用this.$router.push('/dashboard')。这不能用于setup()。相反，您可以使用...

router.push('/dashboard')

【讨论】：