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

【问题标题】：Vue 3 router doesn't work. I don't understand whyVue 3 路由器不工作。我不明白为什么
【发布时间】：2022-01-22 04:05:58
【问题描述】：

我是 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 给了我另一个页面。

当前结果：无论我尝试访问哪个路由/路径，我总是会看到默认/初始页面（初始化时使用的“应用程序”页面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()]
})

【问题讨论】：

标签： javascript node.js vue.js vue-router vuejs3

【解决方案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>

【讨论】：