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

从documentation ...

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

Router-View标记不使用beforeEach（）显示内容

1 个答案: