vue.js - 使用 router.beforeEach 时 Vue 路由器 View 不呈现

Question

我正在使用 Vue 路由器，我需要使用 router.beforeEach回调以确定是否已命中某个路由。唯一的问题是当使用回调时 <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
});