Vue 3 路由器不工作。我不明白为什么

Question

我是 vue (vue 3) 的初学者。我正在测试一个模拟 vue 应用程序，在测试默认主页之后，我想测试如何制作 2 个（或更多）不同的页面。但是，即使我严格按照教程进行操作，我所做的也不起作用。

上下文:

npm v8.3.0
节点 v17.3.0
vue v3.2.25
vite v2.7.2
vue-router v4.0.12

预期结果：配置了2条路由后，访问路由1出现了一个网页。访问路线 2 会给我另一个页面。

当前结果：无论我尝试访问哪个 route/path，我总是会看到 default/initial 页面（“App”页面在初始化 const app = createApp(App) ）。我的第二页永远不会显示。没有显示错误。

项目结构:

/src
  |- main.js
  |- components/
  |- router/
      |- router.js
  |- views/
      |- App.vue
      |- App2.vue

main.js:

import { createApp } from 'vue'
import App from './views/App.vue'
import router from "./router/router"

const app = createApp(App)
app.use(router)
app.mount('#app')

router.js:

import { createWebHistory, createRouter} from 'vue-router'
import App from '../views/App.vue'
import App2 from '../views/App2.vue'

const routes = [
  {
    path: '/',
    component: App
  },
  {
    path: '/toto',
    component: App2
  }
]

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

export default router

App.vue 和 App2.vue 是内容明显不同的 vue 文件。

App.vue:

<script setup>
import HelloWorld from '../components/HelloWorld.vue'
</script>

<template>
  <div id="nav">
    <router-link to="/"> Home </router-link>|
    <router-link to="/toto"> Toto </router-link>
  </div>
  <img alt="Vue logo" src="../assets/logo.png" />
  <HelloWorld msg="Trying to make router work" />
</template>

（我省略了 css 我认为与问题无关的代码）

问题:

当我访问localhost:3000时，我得到了App.vue的内容。
当我访问localhost:3000/toto时，我得到了App.vue的内容。
当我访问 locahost:3000/whatever（不存在的路由）时，我得到 App.vue.

我找不到我做错了什么。

如果有帮助：vite.config.js:

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()]
})

Answer 1

您缺少添加将包含路由组件的 router-view 组件：

<script setup>
import HelloWorld from '../components/HelloWorld.vue'
</script>

<template>
  <div id="nav">
    <router-link to="/"> Home </router-link>|
    <router-link to="/toto"> Toto </router-link>
  </div>
  <img alt="Vue logo" src="../assets/logo.png" />
  <HelloWorld msg="Trying to make router work" />
  <router-view></router-view>
</template>

Vue 3 路由器不工作。我不明白为什么

Vue 3 router doesn't work. I don't understand why

javascript

node.js

vue.js

vue-router

vuejs3