Router-View 标记不使用 beforeEach() 显示内容答案

【问题标题】：Router-View tag doesn't display content with beforeEach()Router-View 标记不使用 beforeEach() 显示内容
【发布时间】：2019-08-10 15:47:56
【问题描述】：

我有一个按设计工作的 vue-router，但是当我向它添加 beforeEach() 函数时，<router-view> 标记中没有出现任何内容。即使beforeEach() 函数为空，它仍然会隐藏页面中的内容。即使使用beforeEach() 功能，我还需要做些什么才能使<router-view> 标签和路由器相互工作？

这是路由器：

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>

【问题讨论】：

标签： vue.js vue-router vuetify.js

【解决方案1】：

如果你的beforeEach调用next()失败，路由将无法解析。

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

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

来自documentation...

next: Function：必须调用此函数来解决钩子。
...
确保始终调用next 函数，否则永远无法解决挂钩。

【讨论】：