路由器-视图标记不使用beforeEach()显示内容

Question

我有一个按设计工作的vue路由器，但是当我向它添加beforeEach()函数时，<router-view>标记中什么也没有出现。即使beforeEach()函数是空的，它仍然对页面隐藏内容。我还需要做一些其他的事情来使<router-view>标记和路由器彼此工作，甚至使用beforeEach()函数？

这是路由器：

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;

<router-view>标签：

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

Answer 1

如果您的beforeEach无法调用next()，则路由将不会解析。

考虑到这一点，一个完全最小的beforeEach将是

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

从文档..。

next: Function：此函数必须被调用以解析钩子。 ..。 next 确保始终调用函数，否则钩子将永远不会被解析。