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

Question

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

上下文：

• npmv8.3.0
• 节点v17.3.0
• vuev3.2.25
• vitev2.7.2
• vue-routerv4.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')

路由器.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>

Answer 2

我知道这已经很长时间了，但我遇到了同样的问题。

这是我所拥有的：

const routes = [
  {
    path: '/',
    component: Parent
    children: [
      {
        path: '/child',
        component: Child
      }
    ]
  }
]

我的解决方案是不使用组件作为父路由，而是使用伪子路由：

const routes = [
  {
    path: '/',
    children: [
      {
        path: '',
        component: Parent
      },
      {
        path: '/child',
        component: Child
      }
    ]
  }
]