Router-View 标签不显示带有 beforeEach() 的内容

Question

我有一个按设计工作的 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>

Answer 1

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

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

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

来自 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 标签不显示带有 beforeEach() 的内容

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

vue.js

vue-router

vuetify.js