处理加载状态会导致组件内的守卫失效

routr.js

import Vue from 'vue'
import VueRouter from 'vue-router'
import Index from '../components/index'
/**
 * 处理路由页面切换时,异步组件加载状态的处理函数
 * @param  {Object} AsyncView 需要加载的组件,如 import('@/components/home/Home.vue')
 * @return {Object} 返回一个promise对象
 */
function lazyLoadView (AsyncView) {
  const AsyncHandler = () => ({
    // 需要加载的组件 (应该是一个 `Promise` 对象)
    component: AsyncView,
    // 异步组件加载时使用的组件
    loading: require('./a.vue').default,
    // 加载失败时使用的组件
    error: require('./b.vue').default,
    // 展示加载时组件的延时时间。默认值是 200 (毫秒)
    delay: 200,
    // 如果提供了超时时间且组件加载也超时了,
    // 则使用加载失败时使用的组件。默认值是:`Infinity`
    timeout: 10000
  })
  return Promise.resolve({
    functional: true,
    render (h, { data, children }) {
      return h(AsyncHandler, data, children)
    }
  })
}
const Test1 = () => lazyLoadView(import('../components/test1'))
Vue.use(VueRouter)
const routes = [
  {
    path: '*',
    redirect: '/'
  },
  {
    path: '/',
    name: 'index',
    component: Index,
    children: [
      {
        path: '/test1',
        name: 'test1',
        component: Test1
      }
    ]
  }
]
const router = new VueRouter({
  mode: 'hash',
  base: process.env.BASE_URL,
  routes
})
export default router

test1.vue

<template>
  <div>
    我是TEST1
  </div>
</template>
<script>
export default {
  name: 'test1',
  beforeRouteEnter (to, from, next) {
    // 在渲染该组件的对应路由被 confirm 前调用
    // 不!能!获取组件实例 `this`
    // 因为当守卫执行前,组件实例还没被创建
    console.log('beforeRouteEnter')
    next()
  },
  beforeRouteLeave (to, from, next) {
    // 导航离开该组件的对应路由时调用
    // 可以访问组件实例 `this`
    console.log('beforeRouteLeave')
    next()
  }
}
</script>

APP.vue

<template>
  <div id="app">
    <button @click="toTest">去test</button>
    <router-view />
  </div>
</template>
<script>
export default {
  methods: {
    toTest () {
      this.$router.push('/test1')
    }
  }
}
</script>

index.vue

<template>
  <div>
    index
    <router-view />
  </div>
</template>
  1. 当APP.vue 点击去test按钮会跳转到/test1页面
  2. test1.vue 定义了组件内的导航守卫并没有执行

vue-router 目前版本是 3.2.0


在这处理路由懒加载状态
但会导致组件内的守卫失效
https://router.vuejs.org/zh/guide/advanced/navigation-guards.html#组件内的守卫

你没有描述清楚问题。。。