Router-View tag doesn't display content with beforeEach()

Question

I have a vue-router that works as designed, but the moment I add the beforeEach() function to it, nothing appears in the <router-view> tags. Even if the beforeEach() function is empty, it still hides the content from the page. I there something else I need to do to make the <router-view> tag and router work with each other even with the beforeEach() function?

Here is the router:

import Vue from 'vue'
import Router from 'vue-router'
import Home from './views/Home.vue'

Vue.use(Router)

const router = new Router({
  mode: 'history',
  base: process.env.BASE_URL,
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home,
      meta: {
        authenticatedRoute: false
      }
    },
    {
      path: '/login',
      name: 'login',
      component: () => import(/* webpackChunkName: "login" */ './views/Login.vue'),
      meta: {
        authenticatedRoute: true
      }
    }
  ]
})

router.beforeEach((to, from, next) => {
  // test
})

export default router;

And the <router-view> tag:

<v-content>
  <router-view></router-view>
</v-content>

Phil Phil · Accepted Answer · 2019-03-20T02:09:07

If your beforeEach fails to call next(), the route will not resolve.

With that in mind, a completely minimal beforeEach would be

router.beforeEach((to, from, next) => {
  next()
})

From the documentation...

next: Function: this function must be called to resolve the hook.
...
Make sure to always call the next function, otherwise the hook will never be resolved.

Router-View tag doesn't display content with beforeEach()

1 Answers