JavaScript >> Javascript 文檔 >  >> JavaScript

Vue 路由器重定向指南

簡介

當使用 Vue.js 開發具有許多頁面並包含許多功能(例如登錄、身份驗證、購物車以及大量 CRUD 應用程序)的 Web 應用程序時,我們將需要在某些時候實現路由,這涉及重定向用戶以編程方式或當他們通過 URL 訪問路由時從一個頁面到另一個頁面。

先決條件

Vue.js 中的路由是通過使用 vue-router 來完成的 包,它使我們能夠輕鬆地在我們的 Vue 應用程序中執行單頁路由。要在 Vue 中實現路由器重定向,我們必須首先在我們的項目中安裝這個包,我們可以通過在終端中運行以下命令來實現:

$ npm install [email protected]

使用 Vue 重定向

Vue.js 中的所有路由都配置在路由器的配置文件中,該文件是 Vue 中所有類型路由的專用文件。該文件通常位於 /src/router/index.js 下 .

要使用路由,我們必須在路由器配置文件中聲明它,然後我們可以在應用程序的其他部分引用它。路由可以通過多種方式完成,不同的場景可能需要不同的重定向,但讓我們先從最基本的重定向類型開始,然後再轉向其他類型,例如程序化、條件和錯誤重定向。

當用戶導航到 /home 路線,說它應該總是將它們重定向到 / 路線,從而顯示 HomePage .這可以通過重定向來完成:

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

主要強調第二個對象,它採用 pathredirect 選項,當用戶導航到集合 path 它會自動將它們重定向到 redirect 中設置的路徑 選項。

注意: 我們會注意到重定向實際上替換了鏈接,這意味著當我們導航到 /home URL 切換到 / 從而顯示為 / 設置的組件 路線。

在我們不希望 URL 更改但我們希望它顯示為 / 設置的組件的情況下 路線,那麼我們可以使用 別名 .

別名

一個 alias 是我們可以添加一個別名的選項 對於現有路線。實際上,我們可以讓多個路由與特定組件一起工作,而不是重定向到處理它的單個路由。

例如,當我們將別名設置為 /home 並且實際路徑設置為 / 帶有 HomePage 的組件 , 當用戶導航到 /home HomePage 組件會出現,但 URL 仍然是 /home

{
   path: '/',
   name: 'Home',
   component: HomePage,
   alias: '/home',
},

注意: 一個 alias 可以採用多個路徑的數組,這些路徑可以包含參數。

{
   path: '/',
   name: 'Home',
   component: HomePage,
   alias: ['/home', '/homepage'],
},

現在 - / , /home/homepage 所有實際上都處理相同的 HomePage 組件!

以編程方式重定向

我們還可以執行程序化重定向,例如單擊按鈕或執行操作時。這是由路由器的 push() 處理的 方法,可以在我們應用程序的任何地方使用。當點擊下例中的按鈕時,它會將用戶帶到指定的路徑:

<template>
   <h2>Home Page</h2>
   <button @click="$router.push('/about')">Redirect Me</button>
</template>

這也可以在我們的腳本標籤中使用 this 來處理 關鍵詞:

<template>
   <h2>Home Page</h2>
   <button @click="redirectMe()">Redirect Me</button>
</template>

<script>
   export default {
      methods: {
         redirectMe() {
            this.$router.push('/about');
         },
      },
   };
</script>

需要注意的是,參數可以是我們之前使用的字符串路徑,也可以是可以接受名稱、路徑等的位置描述符對象:

免費電子書:Git Essentials

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

// String path
$router.push('/about')

// Descriptor object with path
$router.push({ path: '/about' })

// Named route 
$router.push({ name: 'About' })

替換當前網址

當我們使用編程方法進行導航時,我們正在推送和添加瀏覽器的歷史記錄,就像用戶通過手動點擊一樣。如果我們想在不創建新歷史記錄的情況下推送 - 我們需要替換 條目:

router.push({ path: '/about', replace: true })
// This is equivalent to
router.replace({ path: '/about' })

條件重定向

我們可能希望在完成特定命令時重定向用戶,例如當我們要驗證用戶、確認產品購買等時。這通常通過使用條件語句來完成,例如:

<template>
   <h2>Home Page</h2>
   <button @click="checkUser()">Authenticate Me</button>
</template>

<script>
   export default {
      data(){
         return{
            isLoggedIn: true,
         }
      },
      methods: {
         checkUser() {
            if(this.isLoggedIn){
               this.$router.push('/dashboard');
            }else{
               this.$router.push('/login');
            }
         },
      },
   };
</script>

我們也可以在不創建方法的情況下執行此操作:

<template>
   <h2>Home Page</h2>
   <button @click="{ isLoggedIn ? $router.push('/dashboard') : $router.push('/login'); }">
      Authenticate Me
   </button>
</template>

<script>
   export default {
      data() {
         return {
            isLoggedIn: true,
         };
      },
   };
</script>

重定向到 404 頁面

最後,當用戶導航到不正確的路線時,包括如何處理錯誤將是有益的。當用戶導航到未在我們的路由器配置文件中聲明的路由時,它會顯示一個空組件,這通常不是所需的行為。

這很容易通過捕獲除使用正則表達式配置的路由之外的所有路由並將它們分配給錯誤組件來處理:

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

結論

在本文中,我們學習瞭如何在 Vue 中進行重定向以及如何以各種方式處理重定向。


Tutorial JavaScript 教程
  1. 我是如何在 60 天內學會一門語言並推出一款產品的

  2. 有效主題標籤的正則表達式

  3. 像老闆一樣處理 Axios 和錯誤 😎

  4. 反應備忘單

  5. Node.js 將目錄樹轉換為 JSON

  6. 尚未完成,但這是想法! Twilio 黑客馬拉松項目更新

  7. React:如何使用相同類型的多個上下文,同時允許孩子從所有上下文中讀取數據

  1. 使用 Google Maps API 的轉彎路線

  2. .innerHTML 跨站腳本

  3. 了解 REST API

  4. Vue 3 UX 憑藉異步組件和懸念取勝

  5. 為微服務監控引入分佈式跟踪

  6. 用於 Remix 的開源 Node.js 電子商務平台

  7. 在保持 package.json 和 yarn.lock 同步的同時更新依賴項

  1. 面試官最喜歡的:事件冒泡

  2. 延遲加載使用動態導入和交叉點觀察器反應組件

  3. Angular 和 Vue3 中的組件屬性綁定

  4. 利用 `provide/inject` 避免在 Vue.js 中鑽取道具