router.beforeEachを使用している場合、Vue router-viewはレンジングしません。

Question

私はVue Routerと連携しており、特定のルートがヒットしたかどうかを判断するために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

コールバックで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 
});