라우터를 사용할 때 Vue 라우터 보기가 렌더링되지 않음각 항목

라우터를 사용할 때 Vue 라우터 보기가 렌더링되지 않음각 항목

나는 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)

});

해결 방법이 아주 간단하다면 미리 미안해, 해결책을 찾을 수가 없을 것 같아.

고마워요.

그래서 알고 보니 내가 그 사람을 놓치고 있었던 것이다.next();내부를 부르다beforeEach콜백

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

참조URL: https://stackoverflow.com/questions/41666840/vue-router-view-not-rending-when-using-router-beforeeach