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

Posted 2023-03-14

【中文标题】如何在 Vue 3 中重定向另一个路由器？ （在 Laravel 8 中使用 next.router 和 vue 3）

【英文标题】：How to redirect another router in Vue3 ? (used next.router in Laravel 8 with vue3)

【发布时间】：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: "[e-mail]",
                    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");

【参考方案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: "[e-mail]",
                    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')