Vue router-view 在使用 router.beforeEach 时不呈现

Question

我正在使用 Vue 路由器，我需要使用 router.beforeEachcallback 来确定某个路由是否已被击中。唯一的问题是，当使用回调时，<router-view></router-view> 不会呈现任何内容。

app.vue

<template>
    <div id="app">
        <navComponent></navComponent>
        <router-view></router-view>
    </div>
</template>

<script>
    import navComponent from './nav'
        export default {
            components: {
                navComponent
            }
        }
</script>

routes.js

import VueRouter from 'vue-router';

export default new VueRouter({

    routes: [
        {
            path: '/',
            component: require('./views/home')
        },
        {
            path: '/logout'
        }
    ],

    linkActiveClass: 'is-active'
});

app.js

import './bootstrap';
import router from './routes';
import app from './views/app';

router.beforeEach((to, from, next) => {  //if this callback was commented out the <router-view></router-view> would render what i want it to render
    if(to.fullPath === '/logout') {
        axios.get('/logout');
        router.push('/');
    }
});

new Vue({

    el: "#app",

    router,

    render: h => h(app)

});

如果修复很简单，请提前抱歉，我似乎找不到解决方案。

谢谢。

Answer 1

原来我在beforeEach 回调中错过了next(); 调用。

import './bootstrap';
import router from './routes';
import app from './views/app';

router.beforeEach((to, from, next) => {
    if(to.fullPath === '/logout') {
        axios.get('/logout');
        router.push('/');
    }

    next(); //this is needed
});