Vue 路由器指南

簡介

使用 Vue.js 開發 Web 應用程序時，除非您正在構建單頁應用程序 (SPA) ，您需要將多個頁面連接到一個登錄頁面，以允許用戶在其中導航。這稱為路由 .

路由是將用戶導航到網站上不同頁面的過程。 Vue.js 是一個用於創建 Single Page Apps 的 JavaScript 框架，這意味著這個應用程序只從服務器加載到瀏覽器一次，並且在路由時瀏覽器不需要重新加載；相反，它只是請求這些頁面並加載它們。

開始使用

Vue.js 中的路由是使用 Vue Router 完成的 ，它與核心 Vue 庫協同工作，允許我們設置路由系統。我們想使用 vue-router 在我們項目的兩個場景中。我們要么想在現有項目中使用路由器，要么在創建新項目時添加它。

在現有項目中設置 Vue 路由器

整合vue-router 進入現有項目可能是技術性的，我們現在將討論這些細節。第一步是使用以下命令安裝 vue 路由器包：

! npm install [email protected]

安裝後，導航到 src 文件夾並創建一個名為 router 的文件夾 ，後跟一個名為 index.js 的文件 在 router 文件夾，它將作為我們的路由器配置文件。我們的 src 目錄現在看起來像這樣：

在 index.js 文件，讓我們確保我們粘貼下面的代碼，即路由器配置代碼：

import { createRouter, createWebHashHistory } from 'vue-router'
import HomePage from '../views/HomePage.vue'

const routes = [
   {
      path: '/',
      name: 'home',
      component: HomePage
   },
]

const router = createRouter({
   history: createWebHashHistory(),
   routes
})
export default router

我們有一個 routes 包含單個對象的數組，該對象可以是多個對象，其中每個對象代表一條路線。目前，我們只創建了一個會重定向到主頁組件的組件。

每一個 routes 對象通常由 path ，這是相對於站點根目錄的 url 路徑，即 name ，用作標識符，以及 component ，我們在頁面頂部導入。

除了路由數組，我們在底部通過創建一個 createRouter() 來設置路由實例 函數並傳入 history 鍵值和 routes 數組，然後我們導出 router 在我們的應用程序中使用的實例。

要在我們的應用程序中使用此路由器配置，請打開 main.js src 中的文件 文件夾，import router from "./router" ，然後添加 .use(router) createApp(App) 之間 和 .mount('#app') 如下：

import router from './router'

createApp(App).use(router).mount('#app')

這個vue-router 已經在我們的應用程序中進行了全局配置，下一步就是在我們的應用程序中使用它。這很容易通過包含 <router-view /> 來完成 App.js 內 模板標籤，只渲染匹配的路由：

<!--App.vue -->
<template>
<!-- Any code placed here is going to be fixed -->
<!-- This will only show the page that matches the selected route -->
   <router-view /> 
<!-- Any code placed here is going to be fixed -->
</template>

<script>
   export default {
      name: 'App',
   }
</script>

在 Vue.js 中設置路由

路由通常在 router/index.js 中創建 文件的 routes 數組，這些路由連接到組件。最好創建一個將存儲所有頁面視圖的視圖文件夾。例如：

至此，我們現在知道如何手動設置路由了。

注意： 如果我們使用 vue-cli，所有這些都將為我們完成 安裝 vue-router 在創建我們的項目時。

使用 Vue CLI 安裝 Vue 路由器

如果我們要創建一個新項目並相信我們會使用 vue-router ，在創建項目時這樣做更容易。

我們所要做的就是使用 Vue CLI 安裝最新版本的 vue-router 在創建項目的過程中手動選擇特徵時：

使用 Vue Router 延遲加載路由

隨著我們的應用程序大小的增加，捆綁包的大小也會增加，導致我們的網站需要更長的時間來加載。我們可以使用 vue-router 實現延遲加載，避免在用戶特別請求之前加載某些特定的路由。

這通常在路由器配置文件中通過刪除 import 來完成 頂部的聲明，並在我們路由的組件選項中將其替換為動態導入聲明：

import { createRouter, createWebHashHistory } from 'vue-router';
const routes = [
   {
      path: '/',
      name: 'home',
      component: () =>
         import(/* webpackChunkName: "home" */ '../views/HomePage.vue'),
   },
   {
      path: '/about',
      name: 'about',
      component: () =>
         import(/* webpackChunkName: "about" */ '../views/AboutPage.vue'),
   },
];
const router = createRouter({
   history: createWebHashHistory(),
   routes,
});
export default router;

使用 在路由之間導航

到目前為止，我們已經能夠創建路線，但是我們如何在應用程序中導航呢？我們使用 <router-link> 標籤而不是 <a> HTML 中用於處理路由的元素。

例如，如果我們想在應用程序的頂部創建一個導航欄，我們可以在 App.js 中執行此操作 <router-view/> 上面的文件 標記，使其顯示在所有路線上：

<nav>
   <router-link to="/">Home</router-link> |
   <router-link to="/about">About</router-link>
</nav>

router-link 接受 to='path' 將用戶帶到配置路由時設置的組件路徑的屬性。這類似於 href='path``' HTML 中的屬性。

使用命名路由

使用命名路由允許我們傳入 name 可以訪問 name 的密鑰 我們在配置路由時設置的屬性，而不是通過這種方式綁定數據來使用路徑：

免費電子書：Git Essentials

查看我們的 Git 學習實踐指南，其中包含最佳實踐、行業認可的標準以及隨附的備忘單。停止谷歌搜索 Git 命令並真正學習 它！

<router-link :to="{ name: 'About' }">About</router-link>

使用這種方法的一個好處是，如果我們決定為我們的大型應用程序更改路由路徑，我們不需要開始更改所有可能很麻煩的鏈接路徑。

動態路由

可能會出現需要使用動態路由以避免不必要的頁面重複的情況。例如，假設我們有一個水果列表，並且我們希望用戶能夠點擊一個特定的水果，並且只有關於該水果的詳細信息才會顯示在水果詳細信息頁面上。在這種情況下，我們使用動態路由。

我們有兩個頁面——一個展示列表中的水果，另一個展示每個水果的詳細信息，這是一個“藍圖”頁面，用於填充水果的詳細信息。我們將在 Vue 文件夾中創建頁面，然後將路由添加到 routes 數組：

import FruitsPage from '../views/FruitsPage.vue';
import FruitDetails from '../views/FruitDetails.vue';

const routes = [
   {
      path: '/fruits',
      name: 'Fruits',
      component: FruitsPage,
   },
   {
      path: '/fruits/:id',
      name: 'FruitDetails',
      component: FruitDetails,
   },
];

我們會注意到對於 FruitDetails 頁面，我們添加了一個動態的id 屬性，所以它得到 id 參數並使用它來使用 $route.params 查詢顯示在該頁面上的特定數據 在我們的模板中，從而使路線動態化。

在 FruitsPage ，假設我們有一個水果數組，我們循環到我們的應用程序中，我們可以用這樣的方式在參數旁邊用一個鏈接包裝每個水果：

<!-- FruitsPage.vue -->

<template>
   <h1>Fruits page</h1>
   <div :key="fruit.id" v-for="fruit in fruits">
      // dynamic linking by attaching the id as params
      <router-link :to="{ name: 'FruitDetails', params: { id: fruit.id } }">
         <h3>{{ fruit.name }}</h3>
      </router-link>
   </div>
</template>

<script>
   export default {
      data() {
         return {
            fruits: [
               {
                  id: 1,
                  name: 'Apple',
                  description:
                     "Apples are an incredibly nutritious fruit.",
               },
               {
                  id: 2,
                  name: 'Mango',
                  description:
                     'A mango is an edible stone fruit produced by the tropical.',
               },
               {
                  id: 3,
                  name: 'Banana',
                  description:
                     'A banana is an elongated, edible fruit of the genus Musa.',
               },
            ],
         };
      },
   };
</script>

此時，當用戶點擊每個水果時，它會將它們帶到 FruitDetails 我們可以訪問 id 的頁面 參數並使用它來識別應該在 FruitDetails 中顯示哪些水果的詳細信息 頁面。

訪問路由參數

到目前為止，我們已經了解瞭如何將參數動態傳遞給特定頁面，現在讓我們看看如何在 FruitDetails 中訪問該參數 頁。我們可以通過兩種方式訪問 Vue 中的參數 - 通過 $route.params 或利用道具：

使用 $route.params

可通過 $route.params 直接訪問參數 ：

<template>
   <h1>Fruit Details</h1>
   <p>This is fruit with the id of {{ $route.params.id }}</p>
</template>

或者我們可以在 data() 中訪問它 使用 this 的方法 ：

<template>
   <h1>Fruit Details</h1>
   <p>This is fruit with the id of {{ id }}</p>
</template>

<script>
   export default {
      data() {
         return {
            id: this.$route.params.id,
         };
      },
   };
</script>

使用 Vue 道具

通過路由動態訪問數據的另一種簡單方法是使用道具。我們首先要設置 props 到 true 在路由配置對像中：

{
   path: '/fruits/:id',
   name: 'FruitDetails',
   component: FruitDetails,
   props: true,
},

這樣，我們接下來要做的就是添加props script 的選項 標記，然後使用我們的 template 中的道具 標籤：

<template>
   <h1>Fruit Details</h1>
   <p>This is fruit with the id of {{ id }}</p>
</template>

<script>
   export default {
      props: ['id'],
   };
</script>

404 錯誤 - 找不到路由

如果用戶導航到不存在的路由，Vue 將加載頁面但沒有任何組件，從而產生一個空頁面。在這種情況下，最好的做法是顯示一個 404 頁面，並可能帶有一個按鈕，將他們引導至主頁或我們認為他們想去的任何地方。

這可以通過為我們的 404 頁面創建一個組件，然後將 404 路由添加到我們的路由器配置文件的 routes 數組中來輕鬆處理，但是這次我們將使用正則表達式來捕獲之前未聲明的所有路由：

{
   path: '/:catchAll(.*)',
   name: 'ErrorPage',
   component: ErrorPage,
}

:catchAll 是接收 (.*) 正則表達式的動態段 Vue Router 用來檢查用戶導航到的路由是否在我們的路由器配置文件中定義。如果這樣的路由不存在，用戶將被定向到組件，在我們的例子中是 ErrorPage 組件：

<template>
   <h2>404 Page</h2>
   <p>This is a 404 page</p>
   <p>Visit home page <router-link to="/">here</router-link></p>
</template>

重定向

在我們希望用戶在訪問特定路由時被重定向的情況下，例如，如果我們有一條不再使用的舊路由，我們希望用戶在訪問該路由時被重定向到新路由。這很容易通過向我們的路由配置數組添加一個新對象來完成，使用 redirect 字段：

{
   path: '/fruits',
   name: 'Fruits',
   component: FruitsPage,
},
{
   path: '/all-frults',
   redirect: '/fruits',
},

上面的代碼所做的就是如果用戶訪問，路徑 /all-fruits ，它會將它們重定向到 /fruits 路線。

程序化導航

到目前為止，我們已經了解了很多關於路由的知識，但是您還想知道一件事：如何執行程序化導航。我們將程序化導航定義為這樣一種情況，在這種情況下，用戶被重定向/定向基於路徑上發生的特定操作，例如登錄或註冊操作，或者通過單擊特定按鈕，例如“返回”按鈕。

路由器歷史

我們可以使用瀏覽器歷史記錄輕鬆地向後或向前導航，具體取決於我們的偏好。如果你還記得，我們​​有一個 createRouter() 在我們設置 history 的路由器配置文件中的函數 值，允許 Vue 路由器在我們通過 Web 應用程序路由時跟踪我們的路由器歷史記錄。

這使我們可以根據條件（例如按鈕單擊）遍歷瀏覽器的歷史記錄：

<template>
   <h1>Fruit Details</h1>
   <p>This is fruit with the id of {{ id }}</p>
   <button @click="goBack">Go Back</button>
</template>

<script>
   export default {
      props: ['id'],
      methods:{
         goBack(){
            this.$router.go(-1)
         }
      }
   };
</script>

我們也可以決定使用 1 繼續前進 而不是 -1 假設我們想要移動 2 步，我們可以使用 2 或 -2 .

推送

push() 通常在動作發生後使用，並將新條目添加到歷史堆棧。例如，如果用戶成功登錄，我們希望以編程方式導航到儀表板頁面。這是通過在路由名稱旁邊包含 push 方法來實現的：

this.$router.push({ name: 'Dashboard' });

注意： 我們必須確保在我們的路由器配置文件中聲明了該路由，否則它將不起作用並將我們重定向到 404 頁面。

結論

路由是 Vue 的核心功能之一。除非您正在構建單頁應用程序 (SPA) ，您需要將多個頁面連接到一個登錄頁面，以允許用戶瀏覽它們。

在本指南中，我們了解了什麼是路由，如何安裝 vue-router 在新項目和現有項目中，如何執行延遲加載、在路由之間導航、執行動態路由、訪問路由參數和執行編程導航。