步驟 1: 安裝 Vite

首先，確保你的電腦上已經安裝了Node.js和npm。然后，通過以下命令全局安裝Vite（如果已經安裝，請跳過此步驟）：

npm install -g create-vite

步驟 2: 創建新的Vue項目

使用Vite創建一個新的Vue項目。在命令行中執行以下命令：

create-vite vue-router-demo --template vue

這將創建一個名為vue-router-demo的新目錄，并使用Vite的Vue模板初始化項目結構。

步驟 3: 安裝和配置 Vue Router

進入項目目錄，并安裝Vue Router：

cd vue-router-demo
npm install vue-router@next

步驟 4: 創建和配置路由

在項目的根目錄（src目錄下）創建一個新文件夾router，然后在其中創建一個名為index.js的文件。在該文件中配置路由：

// src/router/index.jsimport { createRouter, createWebHistory } from 'vue-router';
import Home from '../views/Home.vue';
import About from '../views/About.vue';const routes = [{path: '/',name: 'Home',component: Home},{path: '/about',name: 'About',component: About}
];const router = createRouter({history: createWebHistory(),routes
});export default router;

步驟 5: 創建視圖組件

在src/views目錄下創建兩個Vue組件文件：Home.vue和About.vue，并編寫內容：

<!-- src/views/Home.vue -->
<template><div><h1>Home</h1><p>Welcome to the Home Page!</p></div>
</template><script>
export default {name: 'Home'
}
</script>

<!-- src/views/About.vue -->
<template><div><h1>About</h1><p>This is an About Page.</p></div>
</template><script>
export default {name: 'About'
}
</script>

步驟 6: 在主應用程序中使用路由

在src/main.js中導入創建的路由，并將其掛載到Vue應用程序中：

// src/main.jsimport { createApp } from 'vue';
import App from './App.vue';
import router from './router';const app = createApp(App);
app.use(router);
app.mount('#app');

步驟 7: 創建入口組件

創建入口組件App.vue并定義主要的應用程序結構：

<template><div id="app"><router-link to="/">Home</router-link> |<router-link to="/about">About</router-link><router-view/></div>
</template><script>
export default {name: 'App'
}
</script>

步驟 8: 運行和測試

最后，在項目根目錄下運行以下命令啟動開發服務器，并在瀏覽器中查看效果：

npm run dev

這將啟動一個開發服務器，你可以在瀏覽器中訪問http://localhost:3000查看你的Vue應用程序，點擊導航鏈接測試路由切換。