为什么 `RouterView` 不渲染任何组件？

Question

如果我手动将它们插入到 HTML 中，所有组件/屏幕都会正确呈现，并且 URL 更改没有错误，但

<RouterView>

中没有显示任何内容。谢谢。

main.ts

import { createApp, VueElement } from 'vue';
import {router} from './data/router';
import AppWidget from './widgets/app.vue';
import * as types from './data/types';

globalThis.__VUE_OPTIONS_API__ = (process.env.NODE_ENV === "development") as unknown as string;
globalThis.__VUE_PROD_DEVTOOLS__ = (process.env.NODE_ENV === "development") as unknown as string;

const app = createApp(AppWidget);
app.use(router);
const root = app.mount(`.app`);

路由器.ts

import { createRouter, createWebHistory } from 'vue-router';
import * as constants from './settings';
import Home from '../widgets/home.vue';
import JournalScreen from '../widgets/journal/journalScreen.vue';

export const router = createRouter(
{
    history: createWebHistory(),
    routes:
    [
        { path: '/',                                    name: 'home',                               component: Home },
        { path: '/journal',                             name: 'journal',                            component: JournalScreen }
    ]
});

app.vue

<!-- JS ----------------------------------------------------->
<script setup lang="ts">
import { RouterLink, RouterView, useRouter } from 'vue-router';
import {router} from '../data/router';
import JournalScreen from './journal/journalScreen.vue';

router.push('/journal');

</script>

<!-- HTML ----------------------------------------------------->
<template>  
    <RouterView >       
    </RouterView>
</template>

journal.vue

<!-- JS ----------------------------------------------------->
<script setup lang="ts">
import { RouterLink, RouterView } from 'vue-router';
import * as types from '../../data/types';
import * as helper from '../../logic/helper';
import {state} from '../../data/state';
import JournalEntry from './journalEntry.vue';
import SignIn from '../io/dropboxSignin.vue';
import SaveToCloud from '../io/save.vue';

function mounted() {console.log('here');} //does not fire
</script>

<!-- HTML ----------------------------------------------------->
<template>
    <sign-in></sign-in> 
    <div>
        Entries
    </div>
    <div v-for="item in state.entries">
        <journal-entry :entry="item" :key="item.id"></journal-entry>
        <br />
    </div>
</template>

Answer 1

app.use(router);

让你的整个应用程序都知道 Vue Router，所以你不需要在你的任何组件中做像

import {router} from './data/router';

这样的事情。

Vue Router with Composition API 的语法可能与您之前使用 Vue 2/Options API 时使用的语法不同

最好彻底查看 Vue Router Composition API 文档，其中介绍了它的用法。

在您的情况下，app.vue 中的这段代码：

import {router} from './data/router';

router.push('/journal');

应替换为：

import { useRouter } from 'vue-router'

const router = useRouter()
router.push('/journal');

使用 mounted 而不是 onMounted（也需要导入）还有一个问题

journal.vue

<script setup>
import { onMounted } from 'vue'

onMounted(() => {
  console.log('here');
})
</script>