我是 vue (vue 3) 的初學者。我正在測驗一個模擬 vue 應用程式，在測驗了默認主頁之后，我想測驗如何制作 2 個（或更多）不同的頁面。但是，即使我正在按照教程進行操作，我所做的也不起作用。
背景關系：
- npm v8.3.0
- 節點v17.3.0
- Vue v3.2.25
- v2.7.2 _
- Vue路由器v4.0.12
預期結果：配置 2 條路線后，訪問路線 1 給了我一個網頁。訪問路線 2 給了我另一個頁面。
當前結果：無論我嘗試訪問哪個路由/路徑，我總是會看到默認/初始頁面（初始化時使用的“應用程式”頁面const app = createApp(App)）。我的第二頁永遠不會顯示。不顯示錯誤。
專案結構：
/src
|- main.js
|- components/
|- router/
|- router.js
|- views/
|- App.vue
|- App2.vue
主.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 檔案。
應用程式.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()]
})
uj5u.com熱心網友回復：
您缺少添加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>
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/418429.html
標籤：