vue-router：页面未加载

Question

因此，使用 router/index.js，我至少设法显示了主页。现在我已经将代码移到 main.js 以简化这个问题，甚至没有加载主页。我只得到vue logo：

main.js：

import { createApp } from 'vue'
import { createRouter, createWebHistory } from 'vue-router'
import App from './App.vue'
import Home from '@/pages/Home.vue'
import DiscussionPage from '@/pages/DiscussionPage.vue'

const routes = [
    {
      path: '/',
      name: 'Home',
      component: Home
    },
    {
    path: '/discussion-page/:id',
    name: 'DiscussionPage',
    component: DiscussionPage,
    props: true
    }
  ]

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

const forumApp = createApp(App)
forumApp.use(router)
  

forumApp.mount('#app')

这是来自主页的模板（src/pages 中的 Home.vue）：

<template>
  <div class="home">
      <p>This is the home page</p>
      <div class="discussions" v-for="discussion in discussions" :key="discussion.id">
        <router-link :to="{name: 'DiscussionPage', params: {id: discussion.id}}">
             {{ discussion.word}}
        </router-link>
      </div>
  </div>
</template>

在我添加 vue-router 之前获取讨论数据没有问题，这就是为什么我没有包含那部分代码的原因。此外，在我将代码移动到 main.js 之前，当单击讨论页面的路由器链接时，url 会发生变化，但页面不会加载。

我使用的是 vue-router4，并且我使用 CLI 和默认的 vue3 选项构建了应用程序。

我做错了什么的任何线索？我确信这是一个明显的小细节，但我找不到它:-(

非常感谢你:-)

Answer 1

这确实很愚蠢，但我想它仍然值得为初学者发布？

为了使 vue-router 工作，必须添加 router-view 标签。我想我可以按照 Bulent 的建议将它添加到我的主页中。但我认为将它添加到 App.vue 中更有意义，这样会影响整个应用程序。

我不得不说，从目前的文档来看，这一点都不清楚：https://next.router.vuejs.org/guide/#router-link

因此，只需在 App.vue 上添加它即可激活路由器，现在一切正常：

<template>
   <router-view/>
</template>