vue-路由器:没有加载的页面

Question

因此，通过使用路由器/index.js，我至少能够显示主页。现在，我已经将代码移到main.js，以简化这个问题，甚至没有加载主页。我只得到vue的徽标：

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/page中的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-路由器之前，没有得到讨论数据的问题，这就是为什么我不包括代码的那一部分。另外，在我将代码移到main.js之前，当单击讨论页面的路由器链接时，url会更改，但是页面不会加载。

我使用vue-router4 4，使用默认的vue3选项使用CLI构建应用程序。

我做错了什么有什么线索吗？我确信这是一个明显的小细节，但我找不到它：

非常感谢:-)

Answer 1

这真的很傻，但我想它还是值得初学者出版的吗？

要使vue路由器工作，必须添加路由器视图标记.我想我可以把它添加到我的主页上，就像Bulent建议的那样。但我认为在App.vue中添加它更有意义，这样会影响整个应用程序。

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

因此，只需将它添加到App.vue上就可以激活路由器，现在所有的操作都很好：

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