了解 Vue.js 中的路由

路由是 Web 應用程式開發中的基本功能。在 Vue.js 中，我們可以使用 Vue Router 輕鬆管理頁面之間的導覽。在這篇文章中，我們將探討如何在 Vue.js 應用程式中設定路由。

什麼是 Vue 路由器？

Vue Router 是用於在 Vue.js 應用程式中管理路由的官方函式庫。使用 Vue Router，我們可以建立單頁面應用程式 (SPA)，無需重新載入頁面即可流暢導航。

安裝 Vue 路由器

首先，我們需要安裝Vue Router。如果您使用的是Vue CLI，則可以在建立新專案時選擇安裝它。如果沒有，可以使用以下命令安裝：

npm install vue-router

設定 Vue 路由器

安裝完成後，我們需要設定Vue Router。以下是設定的基本步驟：

• 建立路由器檔案 在 src 資料夾中建立一個名為 router.js 的新檔案： 從“vue”導入 Vue； 從“vue-router”導入路由器； 從 './views/Home.vue' 匯入主頁； 從 './views/About.vue' 導入關於；

Vue.use(Router);

export default new Router({
  mode: 'history', // Using history mode for cleaner URLs
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home,
    },
    {
      path: '/about',
      name: 'about',
      component: About,
    },
  ],
});

• 將路由器整合到應用程式中 接下來，我們需要將路由器整合到我們的 Vue 實例中。編輯 main.js 檔案如下：

import Vue from 'vue';
import App from './App.vue';
import router from './router';

new Vue({
  el: '#app',
  router, // Add the router to the Vue instance
  render: h => h(App),
});

• 使用路由器連結 為了在頁面之間導航，我們使用 元件。以下是如何在 App.vue 檔案中使用它的範例：

• 建立新頁面 現在，讓我們建立兩個將使用的元件：Home.vue 和 About.vue。

Home.vue:

關於.vue：

現在您可以使用以下命令運行應用程式：

npm run serve

開啟瀏覽器並造訪 http://localhost:8080。嘗試點擊“主頁”和“關於”連結以查看路由的工作原理！

結論

在這篇文章中，我們介紹了使用 Vue Router 在 Vue.js 中進行路由的基礎知識。借助此路由功能，您可以建立更具互動性和用戶友好性的應用程式。在下一篇文章中，我們可以深入研究 Vue Router 的更多進階功能，例如路由參數和巢狀路由。

我希望這篇文章對您有幫助！如果您有任何疑問，請隨時發表評論。