Laravel Vuejs axios登录更改组件

Question

I built a basic login function (backend written in laravel), I do an axios call successfully but I fail to show the home component, the url changes but the ui stays the same this.$router.push('/home');

My Login.vue login logic:

    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");
            })

The url changes to /home but the ui does not change.

my router:

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;

This is my 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 holds the ui which shall be used after the login proccess. App.vue holds a <router-view></router-view> and the navigation logic in App.vue works fine updating url and changing component.

It just does not work after the login process.

Answer 1

尝试：

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