Vue3的路由RouterView组件是怎么工作的？

import { createRouter, createWebHashHistory } from "vue-router"
import { setupPermissionGuard } from './permission'
// 定义router的配置
const routes = [
  {
    path: "/",
    component: () => import("../view/xxxxx1.vue"),
  },
  {
    path: "/system2",
    component: () => import("../view/xxxxx2.vue"),
  }
]
// 创建一个router，并指定使用hash模式的路由，一般路由是#号开头的 /#/path
// 还有一种使用web路由，就是不要#号，需要html5的api，也需要nginx配置支持
const router = createRouter({
  history: createWebHashHistory(),
  routes: routes
})
// 设置路由守卫
router.beforeEach(async (to, _from, next) => {
  return next()
})
export default router;

import router from "./router";
// 把router注册到vue实例内
app.use(router);

<RouterView />
 
import { RouterView} from 'vue-router';

setup(props, { attrs, slots }) {
    const injectedRoute = inject(routerViewLocationKey)!
    const routeToDisplay = computed<RouteLocationNormalizedLoaded>(
      () => props.route || injectedRoute.value
    )
    // ...省略一些代码...
    const matchedRouteRef = computed<RouteLocationMatched | undefined>(
      () => routeToDisplay.value.matched[depth.value]
    )
    // ...省略一些代码...
 
    return () => {
      const route = routeToDisplay.value
      
      const currentName = props.name
      const matchedRoute = matchedRouteRef.value
      const ViewComponent =
        matchedRoute && matchedRoute.components![currentName]
 
      if (!ViewComponent) {
        return normalizeSlot(slots.default, { Component: ViewComponent, route })
      }
 
      // ...省略一些代码...
      const onVnodeUnmounted: VNodeProps['onVnodeUnmounted'] = vnode => {
        // remove the instance reference to prevent leak
        if (vnode.component!.isUnmounted) {
          matchedRoute.instances[currentName] = null
        }
      }
 
      const component = h(
        ViewComponent,
        assign({}, routeProps, attrs, {
          onVnodeUnmounted,
          ref: viewRef,
        })
      )
 
     // ...省略代码...
 
      return (
        // pass the vnode to the slot as a prop.
        // h and <component :is="..."> both accept vnodes
        normalizeSlot(slots.default, { Component: component, route }) ||
        component
      )
    }
  }

const routeToDisplay = computed<RouteLocationNormalizedLoaded>(
      () => props.route || injectedRoute.value
    )

const route = routeToDisplay.value

<router-view v-slot="{ Component, route }">
  <keep-alive>
    <!-- 用 fullPath 作为 key，路由变化（含参数/查询）时强制重建组件 -->
    <component :is="Component" :key="route.fullPath" />
  </keep-alive>
</router-view>

function finalizeNavigation(
    toLocation: RouteLocationNormalizedLoaded,
    from: RouteLocationNormalizedLoaded,
    isPush: boolean,
    replace?: boolean,
    data?: HistoryState
  ): NavigationFailure | void {
    // a more recent navigation took place
    const error = checkCanceledNavigation(toLocation, from)
    if (error) return error
 
    // only consider as push if it's not the first navigation
    const isFirstNavigation = from === START_LOCATION_NORMALIZED
    const state: Partial<HistoryState> | null = !isBrowser ? {} : history.state
 
    // change URL only if the user did a push/replace and if it's not the initial navigation because
    // it's just reflecting the url
    if (isPush) {
      // on the initial navigation, we want to reuse the scroll position from
      // history state if it exists
      if (replace || isFirstNavigation)
        routerHistory.replace(
          toLocation.fullPath,
          assign(
            {
              scroll: isFirstNavigation && state && state.scroll,
            },
            data
          )
        )
      else routerHistory.push(toLocation.fullPath, data)
    }
 
    // accept current navigation
    currentRoute.value = toLocation
    handleScroll(toLocation, from, isPush, isFirstNavigation)
 
    markAsReady()
  }

// useCallbacks hook
export function useCallbacks<T>() {
  let handlers: T[] = []
 
  function add(handler: T): () => void {
    handlers.push(handler)
    // 可以在外部主动删除注册的守卫
    return () => {
      const i = handlers.indexOf(handler)
      if (i > -1) handlers.splice(i, 1)
    }
  }
 
  function reset() {
    handlers = []
  }
 
  return {
    add,
    list: () => handlers.slice(),
    reset,
  }
}
// 定义了3个队列管理器
const beforeGuards = useCallbacks<NavigationGuardWithThis<undefined>>()
const beforeResolveGuards = useCallbacks<NavigationGuardWithThis<undefined>>()
const afterGuards = useCallbacks<NavigationHookAfter>()
 
// 然后我们执行的
router.beforeEach()
//实际就是add函数的别名，源码1003行
const router = {
  // ...
  beforeEach: beforeGuards.add, 
  beforeResolve: beforeResolveGuards.add,
  afterEach: afterGuards.add,
  // ...
}

 return (
      runGuardQueue(guards)
        .then(() => {
          // check global guards beforeEach
          guards = []
          for (const guard of beforeGuards.list()) {
            guards.push(guardToPromiseFn(guard, to, from))
          }
          guards.push(canceledNavigationCheck)
 
          return runGuardQueue(guards)
        })
        // ...省略代码...
        .then(() => {
          // check global guards beforeResolve
          guards = []
          for (const guard of beforeResolveGuards.list()) {
            guards.push(guardToPromiseFn(guard, to, from))
          }
          guards.push(canceledNavigationCheck)
 
          return runGuardQueue(guards)
        })
        // catch any navigation canceled
        .catch(err =>
          isNavigationFailure(err, ErrorTypes.NAVIGATION_CANCELLED)
            ? err
            : Promise.reject(err)
        )