Vue.js 由于路由器不兼容，离子标签无法呈现？IonRouter在使用'；vue路由器&x27；而不是'@爱奥尼亚/vue路由器&x27；

在这个初学者之后，我遇到了一个运行时问题，其中tabs页面不会呈现。我只能假设根本原因是因为我使用的是官方的

vue路由器

，而不是

@ionic/vue路由器

库，这可能是Ion Tabs在幕后使用的。我的路由文件：

    const router = createRouter({
        history: createWebHistory(process.env.BASE_URL),
        routes: [
            {
                path: '/',
                redirect: LOGIN_PATH,
            },
            {
                path: LOGIN_PATH,
                name: 'Login',
                component: Login,
            },
            {
                path: LEVELS_PATH,
                name: 'Levels',
                component: Levels,
                meta: {
                    requiresAuth: true,
                },
            },
            {
                path: '/tabs/',
                component: Tabs,
                children: [
                    {
                        path: '',
                        redirect: '/tabs/schedule',
                    },
                    {
                        path: 'schedule',
                        component: () => import('@/views/Schedule.vue'),
                    },
                    {
                        path: 'speakers',
                        component: () => import('@/views/Speakers.vue'),
                    },
                ],
            },
        ],
    })

我想从没有选项卡的Levels页面导航到有选项卡的页面。我从web控制台获得这些错误

[Vue warn]: injection "navManager" not found. 
  at <IonRouterOutlet tabs=true > 
  at <IonTabs onIonTabsWillChange=fn<beforeTabChange> onIonTabsDidChange=fn<afterTabChange> > 
  at <IonPage> 
  at <Tabs onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< null > > 
  at <BaseTransition mode="out-in" appear=false persisted=false  ... > 
  at <Transition name="fade" mode="out-in" > 
  at <RouterView> 
  at <IonContent> 
  at <IonPage id="main-content" > 
  at <Anonymous class="pane-collapsed" when=true content-id="main-content" > 
  at <IonApp> 
  at <TheShell key=1 > 
  at <App>


[Vue warn]: injection "viewStacks" not found. 
  at <IonRouterOutlet tabs=true > 
  at <IonTabs onIonTabsWillChange=fn<beforeTabChange> onIonTabsDidChange=fn<afterTabChange> > 
  at <IonPage> 
  at <Tabs onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< null > > 
  at <BaseTransition mode="out-in" appear=false persisted=false  ... > 
  at <Transition name="fade" mode="out-in" > 
  at <RouterView> 
  at <IonContent> 
  at <IonPage id="main-content" > 
  at <Anonymous class="pane-collapsed" when=true content-id="main-content" > 
  at <IonApp> 
  at <TheShell key=1 > 
  at <App>


[Vue warn]: Unhandled error during execution of setup function 
  at <IonRouterOutlet tabs=true > 
  at <IonTabs onIonTabsWillChange=fn<beforeTabChange> onIonTabsDidChange=fn<afterTabChange> > 
  at <IonPage> 
  at <Tabs onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< null > > 
  at <BaseTransition mode="out-in" appear=false persisted=false  ... > 
  at <Transition name="fade" mode="out-in" > 
  at <RouterView> 
  at <IonContent> 
  at <IonPage id="main-content" > 
  at <Anonymous class="pane-collapsed" when=true content-id="main-content" > 
  at <IonApp> 
  at <TheShell key=1 > 
  at <App>

---

您必须使用ionic vue路由器来解决您的问题

Uncaught TypeError: ionRouter is undefined
    setupViewItem index.js:992
    setup index.js:1011
    callWithErrorHandling runtime-core.esm-bundler.js:154
    setupStatefulComponent runtime-core.esm-bundler.js:6419
    setupComponent runtime-core.esm-bundler.js:6380
    mountComponent runtime-core.esm-bundler.js:4118
    ... more lines