Question

我构建了一个基本的登录功能（使用laravel编写的后端），我成功进行了axios调用，但是我无法显示home组件，URL更改了，但是ui保持不变this.$router.push('/home');

我的Login.vue登录逻辑：

    login() {
        console.log(this.getLoginData());
        axios.post("/login", {
            email: this.email, 
            password: this.password
        })
            .then(response => {         
                console.log("success");
                this.$router.push('/home');
            })
            .catch(error => {
                console.log("error");
            })

URL更改为/ home，但ui不变。

我的路由器：

import Vue from 'vue';
import Vuex from 'vuex';
import VueRouter from 'vue-router';

import Login from '@auth/Login';
import Home from '@/js/components/Home';

Vue.use(VueRouter);
Vue.use(Vuex);

const router = new VueRouter({
    mode: 'history',
    routes: [
        {
            path: '/login',
            name: 'login',
            component: Login,
        },
        {
            path: '/',
            name: 'home',
            component: Home
        },
    ]
});

export default router;

这是我的app.js

import App from '@/js/views/App';
import Auth from '@views/Auth';

Vue.use(Vuetify);
Vue.use(Vuex);

const app = new Vue({
    el: '#app',
    router: Routes,
    store: PdfStore,
    render: h => h(Auth)
});

export default app;

App.vue保存将在登录过程之后使用的ui。 App.vue拥有<router-view></router-view>，App.vue中的导航逻辑可以很好地更新url和更改组件。

它只是在登录过程后不起作用。

Answer 1

尝试：

this.$router.push({ name: 'home' })

Laravel Vuejs axios登录更改组件

1 个答案: