Vue router-view not rending when using router.beforeEach

Question

I'm working with the Vue Router and I need to use the router.beforeEachcallback to determine if a certain route has been hit. The only problem with this is that when the callback is used the <router-view></router-view> does not render anything.

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)

});

Sorry in advance if the fix is very simple, I just can't seem to find the solution.

Thanks.

Jack · Accepted Answer · 2017-01-15 22:14:47Z

7

So it turns out I was missing the next(); call within the beforeEach callback.

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

answered Jan 15, 2017 at 22:14

Jack

3095 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Vue router-view not rending when using router.beforeEach

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related