學習和分享關于 Vue.js 的路由（vue-router）是一個非常有價值的主題，因為路由是構建單頁應用程序（SPA）的核心部分。本文將介紹 Vue.js 路由的基本概念和實現，并展示一個典型的項目目錄結構。

Vue.js 路由簡介

Vue Router 是 Vue.js 官方的路由管理器，允許我們在 Vue 應用中實現客戶端路由。它使我們可以創建多個頁面或視圖，并在用戶導航時保持單頁應用程序的感覺。

目錄結構

一個典型的 Vue.js 項目目錄結構（包括 Vue Router）如下所示：

my-vue-app/
├── node_modules/
├── public/
│   ├── index.html
│   └── ...
├── src/
│   ├── assets/
│   ├── components/
│   │   ├── Home.vue
│   │   ├── About.vue
│   │   └── ...
│   ├── router/
│   │   └── index.js
│   ├── views/
│   │   ├── HomeView.vue
│   │   ├── AboutView.vue
│   │   └── ...
│   ├── App.vue
│   ├── main.js
│   └── ...
├── .gitignore
├── babel.config.js
├── package.json
├── README.md
└── vue.config.js

關鍵文件和文件夾

• public/：包含靜態文件，如 index.html。
• src/：包含源代碼。
  • assets/：存放靜態資源（如圖片、字體等）。
  • components/：存放 Vue 組件。
  • router/：存放路由配置文件。
    • index.js：定義路由和路由規則。
  • views/：存放視圖組件（通常是頁面級組件）。
  • App.vue：根組件。
  • main.js：入口文件，初始化 Vue 實例并掛載到 DOM。

實現基本的路由

下面是實現基本路由的步驟：

1. 安裝 Vue Router

首先，需要安裝 Vue Router：

npm install vue-router

2. 配置路由

創建并配置路由文件 src/router/index.js：

import Vue from 'vue';
import VueRouter from 'vue-router';
import HomeView from '../views/HomeView.vue';
import AboutView from '../views/AboutView.vue';Vue.use(VueRouter);const routes = [{path: '/',name: 'Home',component: HomeView},{path: '/about',name: 'About',component: AboutView}
];const router = new VueRouter({mode: 'history',base: process.env.BASE_URL,routes
});export default router;

3. 創建視圖組件

在 src/views/ 目錄下創建視圖組件 HomeView.vue 和 AboutView.vue。

HomeView.vue：

<template><div><h1>Home Page</h1><p>Welcome to the home page.</p></div>
</template><script>
export default {name: 'HomeView'
};
</script><style scoped>
/* Add your styles here */
</style>

AboutView.vue：

<template><div><h1>About Page</h1><p>This is the about page.</p></div>
</template><script>
export default {name: 'AboutView'
};
</script><style scoped>
/* Add your styles here */
</style>

4. 修改 main.js

在 src/main.js 中引入并使用路由：

import Vue from 'vue';
import App from './App.vue';
import router from './router';Vue.config.productionTip = false;new Vue({router,render: h => h(App)
}).$mount('#app');

5. 更新根組件 App.vue

修改 src/App.vue 以包含路由視圖和導航鏈接：

<template><div id="app"><nav><router-link to="/">Home</router-link><router-link to="/about">About</router-link></nav><router-view/></div>
</template><script>
export default {name: 'App'
};
</script><style>
/* Add your styles here */
</style>

6. 啟動開發服務器

最后，啟動開發服務器并查看效果：

npm run serve

打開瀏覽器訪問 http://localhost:8080，你應該能夠看到首頁和關于頁面，并可以通過導航鏈接在它們之間切換。

---

通過這些步驟，你已經創建了一個包含 Vue Router 的基本 Vue.js 應用程序。你可以根據需要添加更多的路由和組件，以構建更加復雜和功能豐富的應用。希望這篇文章能幫助你快速入門并分享 Vue.js 路由的知識。