我有另一个解决方案（也许它更多的是一个变通办法，但感觉有点正确）
您可以将路由器 Package 在自定义插件安装方法中，例如：

const router = createRouter({
    history: createWebHashHistory(),
    routes,
});

export default {
    install(app, options) {
        router.install(app)

        router.beforeEach((to, from, next) => {
            // access all used plugins
            console.log(app.config.globalProperties.$store)
            console.log(app.config.globalProperties.$First)
            // ... stuff ...
        });
    },
};

在你的main.js中，你可以像以前一样use(...)路由器：

import { createApp } from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";
import * as plugins from "./plugins";

const app = createApp(App)

app.use(store)
   .use(plugins.First)
   .use(plugins.Second)
   .use(router, app) // add "app" as second param, that way you can access the store and every other plugin within the router
   .mount("#app");

router.js的一个解决方案是导出一个函数，该函数捕获给定的app参数，该参数可以用在路由的beforeEnter钩子中：

// router.js
import { createRouter as createVueRouter, createWebHistory } from 'vue-router'

const createRoutes = (app) => [
  {
    path: '/restricted',
    component: () => import('@/views/Restricted.vue'),
    beforeEnter(to, from, next) {
                             👇
      const authenticated = app.config.globalProperties.$keycloak?.authenticated
      if (authenticated) {
        next()
      } else {
        next('/login')
      }
    }
  },
  //...
]

export const createRouter = (app) => {
  return createVueRouter({
    history: createWebHistory(),
    routes: createRoutes(app), 👈
  })
}

demo 1
...或在全局beforeEach挂接中：

// router.js
import { createRouter as createVueRouter, createWebHistory } from 'vue-router'

const createRoutes = () => [
  {
    path: '/restricted',
    component: () => import('@/views/Restricted.vue'),
    meta: { requiresAuth: true }, 👈
  },
  //...
]

export const createRouter = (app) => {
  const router = createVueRouter({
    history: createWebHistory(),
    routes: createRoutes(),
  })

  router.beforeEach((to, from, next) => {
                          👇
    const authenticated = app.config.globalProperties.$keycloak?.authenticated
    if (to.meta.requiresAuth && !authenticated) {
      next({ name: 'Login' })
    } else {
      next()
    }
  })
  return router
}

demo 2
那么您的main.js将像这样使用它：

import { createRouter } from './router'

const app = createApp(App)
const router = createRouter(app)
app.use(router)

const keycloak = /*...*/

keycloak.init(/*...*/)
  .then((auth) => {
    if (auth) {
      router.push('/dashboard')
    }
  })

app.mount('#app')

beforeEnter和beforeRouteEnter没有对Vue示例的访问权限。
您可以将逻辑更改为使用beforeRouteLeave，该beforeRouteLeave具有对使用this的示例的访问权限，也可以添加回调函数，如下所示：

beforeRouteEnter (to, from, next) {
  next(vm => {
    // access to component instance via `vm`
    console.log(vm.$keycloak.authenticated);
  })
}

在您的特定情况下，我将更改逻辑以使用beforeRouteLeave，并防止在用户未通过身份验证的情况下调用next()函数。
您可以在此处找到更多详细信息：https://router.vuejs.org/guide/advanced/navigation-guards.html#in-component-guards

您可以将路由守卫附加到main.js文件中，根据您的代码，该文件将变为：

const myApp = createApp(App)

let initOptions = {...}

const keycloak = Keycloak(initOptions)

myApp.config.globalProperties.$keycloak = keycloak;
myApp.use(VueAxios, axios)
myApp.use(store)
myApp.use(router)
myApp.mount("#app");

keycloak.init({...}).then(async (auth) => {
  if (auth) {
    router.push("/dashboard"); 
  }
}).catch((e) => {...})

router.beforeEnter: (to, from, next) => {
  console.log(myapp.$keycloak.authenticated); //here. (Undefined)
  if (store.getters.getLoginState === "true") {
    ...
  } else {
    ...
  }
}