首頁 web前端 js教程 vue嵌套路由與404重定向實作方法分析

vue嵌套路由與404重定向實作方法分析

May 05, 2018 pm 02:12 PM
實現 方法 重定向

這篇文章主要介紹了vue嵌套路由與404重定向實現方法,結合實例形式分析了vue.js嵌套路由與404重定向的概念、原理、實現步驟與相關操作技巧,需要的朋友可以參考下

本文實例講述了vue嵌套路由與404重定向實作方法。分享給大家供大家參考,具體如下:

第一部分: vue巢狀路由

##巢狀路由是什麼?

嵌套路由就是在一個被路由過來的頁面下可以繼續使用路由,嵌套也就是路由中的路由的意思。例如在vue中,我們如果不使用嵌套路由,那麼只有一個

,但如果使用,那麼在一個元件中就還有 ,這也就構成了嵌套。

為什麼要使用巢狀路由?

就例如在一個頁面中, 在頁面的上半部分,有三個按鈕,而下半部分是根據點擊不同的按鈕來顯示不同的內容,那麼我們就可以在這個元件中的下半部看成是一個嵌套路由,也就是說在這個元件的下面需要再來一個

, 當我點擊不同的按鈕時,他們的 router-link分別所指向的元件就會被渲染到這個中。

官網是怎麼介紹的?

每次說到官網,就要說一說百度,百度搜尋千萬別用。 。

要說官網舉得這個圖,本來是好的,但是描述起來累贅太多。吐個槽。 。

這就是實際生活中的一個很好的應用介面, 通常是由多層嵌套的組件組合而成。同樣的, URL中各段動態路徑也依照某種結構對應嵌套的各層組件。如上所示。

即user表示用戶頁, 而user就可以看成是vue中的一個單頁面,對於一個user,一定要有哪一個用戶,這裡的foo(小明、小紅)就代表了一個用戶,這裡的profile可以理解為個人主頁,這裡的posts可以理解為這個人所發表的文章, 而title可能是不變的,比如無論切換到這個人發表的文章,還是切換到這個人的個人主頁,我們都希望在最上方顯示同樣的東西,而在切換的時候換的就是下面的部分,這個部分我們就可以用來寫,那麼,這,就是嵌套路由。

借助vue-router,使用巢狀路由配置,就可以很簡單的表達這種關係。

<p id="app">
 <router-view></router-view>
</p>
登入後複製

const User = {
 template: `
  <p class="user">
   <h2>User {{ $route.params.id }}</h2>
   <router-view></router-view>
  </p>
 `
}
const router = new VueRouter({
 routes: [
  { path: &#39;/user/:id&#39;, component: User,
   children: [
    {
     // 当 /user/:id/profile 匹配成功,
     // UserProfile 会被渲染在 User 的 <router-view> 中
     path: &#39;profile&#39;,
     component: UserProfile
    },
    {
     // 当 /user/:id/posts 匹配成功
     // UserPosts 会被渲染在 User 的 <router-view> 中
     path: &#39;posts&#39;,
     component: UserPosts
    },
    // 当 /user/:id 匹配成功,
    // UserHome 会被渲染在 User 的 <router-view> 中
    {
      path: &#39;&#39;,
      component: UserHome
    },
     // ...其他子路由
   ]
  }
 ]
})
登入後複製

OK!這大致就是嵌套路由了!其中,第一段程式碼是在檔案中放了

, 這是最頂層的出口,渲染高階路由符合的元件。

從路由設定中,我們可以看到: 當路徑是 /user/小明 或 /user/小紅 時, 就會把User渲染到頁面中,這個渲染的就是頂層路由。 (:id就是小明、小紅,)。然後這個頁面中就有一個嵌套路由,當然,如果url就是/user/小明的話,那麼這個二級路由是什麼都不會顯示的, 如果我們希望即使只是/user/小明, 也得渲染點什麼,那麼我們就可以設定path: "" 所對應的路由,這樣,即使/user/小明也是可以顯示更多的了。

如果我們想看小明的個人主頁,就是 /user/小明/profile 這時就會把 UserProfile 元件渲染到這個二級路由了。

如果我們想看小明發表的文章,就是 /user/小明/posts 這時就會把 UserPost 元件渲染到這個二級路由中, 這也就是二級路由了。

其實概念就這麼多,是不是很簡單呢!

但還需要注意下面幾點:

1. 從上面的程式碼可以看出: 在元件中,我們可以透過

$route.params .id 來取得到user/小明/post 中的小明,這樣,我們就可以進行個人化的設定了。

2. 以 / 開頭的巢狀路徑會被當做根路徑, 這可以讓你充分的使用嵌套元件而無需設定嵌套的路徑。

也就是說: 在上面的程式碼中,我們在children下,寫path: "profile", 就相當於拼接成了/user/:id/profile ,當然,我們也可以直接寫為path: "/user/:id/profile" ,最終的結果是一樣的,但是我個人認為後者的表示方法可以跟清晰的觀察結構。如果嵌套層數過多,可能會出錯。

第二部分: 404重定向#

有时,我们可能会输入错的 url, 或者不再存在等各种原因导致其不再能被访问,那么我们就可以对于这种情况进行重定向。 很简单,只要在路由中添加下面的代码就可以了:

{
   path: "*",
   redirect: "/"
}
登入後複製

即对于所有的(*代表所有)错误页面,我们都可以重定向到 "/" 中。

相关推荐:

React为 Vue 引入容器组件和展示组件的教程详解

Vue项目全局配置微信分享思路

以上是vue嵌套路由與404重定向實作方法分析的詳細內容。更多資訊請關注PHP中文網其他相關文章!

本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

Video Face Swap

Video Face Swap

使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱門文章

<🎜>:泡泡膠模擬器無窮大 - 如何獲取和使用皇家鑰匙
3 週前 By 尊渡假赌尊渡假赌尊渡假赌
北端:融合系統,解釋
3 週前 By 尊渡假赌尊渡假赌尊渡假赌
Mandragora:巫婆樹的耳語 - 如何解鎖抓鉤
3 週前 By 尊渡假赌尊渡假赌尊渡假赌

熱工具

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

熱門話題

Java教學
1664
14
CakePHP 教程
1423
52
Laravel 教程
1321
25
PHP教程
1269
29
C# 教程
1249
24
微信刪除的人如何找回(簡單教學告訴你如何恢復被刪除的聯絡人) 微信刪除的人如何找回(簡單教學告訴你如何恢復被刪除的聯絡人) May 01, 2024 pm 12:01 PM

而後悔莫及、人們常常會因為一些原因不小心刪除某些聯絡人、微信作為一款廣泛使用的社群軟體。幫助用戶解決這個問題,本文將介紹如何透過簡單的方法找回被刪除的聯絡人。 1.了解微信聯絡人刪除機制這為我們找回被刪除的聯絡人提供了可能性、微信中的聯絡人刪除機制是將其從通訊錄中移除,但並未完全刪除。 2.使用微信內建「通訊錄恢復」功能微信提供了「通訊錄恢復」節省時間和精力,使用者可以透過此功能快速找回先前刪除的聯絡人,功能。 3.進入微信設定頁面點選右下角,開啟微信應用程式「我」再點選右上角設定圖示、進入設定頁面,,

怎麼在番茄免費小說app中寫小說 分享番茄小說寫小說方法教程 怎麼在番茄免費小說app中寫小說 分享番茄小說寫小說方法教程 Mar 28, 2024 pm 12:50 PM

番茄小說是一款非常熱門的小說閱讀軟體,我們在番茄小說中經常會有新的小說和漫畫可以去閱讀,每一本小說和漫畫都很有意思,很多小伙伴也想著要去寫小說來賺取賺取零用錢,在把自己想要寫的小說內容編輯成文字,那麼我們要怎麼樣在這裡面去寫小說呢?小伙伴們都不知道,那就讓我們一起到本站本站中花點時間來看寫小說的方法介紹。分享番茄小說寫小說方法教學  1、先在手機上打開番茄免費小說app,點擊個人中心——作家中心  2、跳到番茄作家助手頁面——點擊創建新書在小說的結

手機版龍蛋孵化方法大揭密(一步一步教你如何成功孵化手機版龍蛋) 手機版龍蛋孵化方法大揭密(一步一步教你如何成功孵化手機版龍蛋) May 04, 2024 pm 06:01 PM

手機遊戲成為了人們生活中不可或缺的一部分,隨著科技的發展。它以其可愛的龍蛋形象和有趣的孵化過程吸引了眾多玩家的關注,而其中一款備受矚目的遊戲就是手機版龍蛋。幫助玩家們在遊戲中更好地培養和成長自己的小龍,本文將向大家介紹手機版龍蛋的孵化方法。 1.選擇合適的龍蛋種類玩家需要仔細選擇自己喜歡並且適合自己的龍蛋種類,根據遊戲中提供的不同種類的龍蛋屬性和能力。 2.提升孵化機的等級玩家需要透過完成任務和收集道具來提升孵化機的等級,孵化機的等級決定了孵化速度和孵化成功率。 3.收集孵化所需的資源玩家需要在遊戲中

華為手機如何實現雙微信登入? 華為手機如何實現雙微信登入? Mar 24, 2024 am 11:27 AM

華為手機如何實現雙微信登入?隨著社群媒體的興起,微信已成為人們日常生活中不可或缺的溝通工具之一。然而,許多人可能會遇到一個問題:在同一部手機上同時登入多個微信帳號。對於華為手機用戶來說,實現雙微信登入並不困難,本文將介紹華為手機如何實現雙微信登入的方法。首先,華為手機自帶的EMUI系統提供了一個很方便的功能-應用程式雙開。透過應用程式雙開功能,用戶可以在手機上同

手機字體大小設定方法(輕鬆調整手機字體大小) 手機字體大小設定方法(輕鬆調整手機字體大小) May 07, 2024 pm 03:34 PM

字體大小的設定成為了重要的個人化需求,隨著手機成為人們日常生活的重要工具。以滿足不同使用者的需求、本文將介紹如何透過簡單的操作,提升手機使用體驗,調整手機字體大小。為什麼需要調整手機字體大小-調整字體大小可以使文字更清晰易讀-適合不同年齡段用戶的閱讀需求-方便視力不佳的用戶使用手機系統自帶字體大小設置功能-如何進入系統設置界面-在在設定介面中找到並進入"顯示"選項-找到"字體大小"選項並進行調整第三方應用調整字體大小-下載並安裝支援字體大小調整的應用程式-開啟應用程式並進入相關設定介面-根據個人

PHP程式設計指南:實作斐波那契數列的方法 PHP程式設計指南:實作斐波那契數列的方法 Mar 20, 2024 pm 04:54 PM

程式語言PHP是一種用於Web開發的強大工具,能夠支援多種不同的程式設計邏輯和演算法。其中,實作斐波那契數列是一個常見且經典的程式設計問題。在這篇文章中,將介紹如何使用PHP程式語言來實作斐波那契數列的方法,並附上具體的程式碼範例。斐波那契數列是一個數學上的序列,其定義如下:數列的第一個和第二個元素為1,從第三個元素開始,每個元素的值等於前兩個元素的和。數列的前幾元

快速掌握:華為手機開啟兩個微信帳號方法大揭密! 快速掌握:華為手機開啟兩個微信帳號方法大揭密! Mar 23, 2024 am 10:42 AM

在現今社會,手機已經成為我們生活中不可或缺的一部分。而微信作為我們日常溝通、工作、生活的重要工具,更是經常被使用。然而,在處理不同事務時可能需要分開兩個微信帳號,這就要求手機能夠支援同時登入兩個微信帳號。華為手機作為國內知名品牌,很多人使用,那麼華為手機開啟兩個微信帳號的方法是怎麼樣的呢?下面就來揭秘一下這個方法。首先,要在華為手機上同時使用兩個微信帳號,最簡

如何在華為手機上實現微信分身功能 如何在華為手機上實現微信分身功能 Mar 24, 2024 pm 06:03 PM

如何在華為手機上實現微信分身功能隨著社群軟體的普及和人們對隱私安全的日益重視,微信分身功能逐漸成為人們關注的焦點。微信分身功能可以幫助使用者在同一台手機上同時登入多個微信帳號,方便管理和使用。在華為手機上實現微信分身功能並不困難,只需要按照以下步驟操作即可。第一步:確保手機系統版本和微信版本符合要求首先,確保你的華為手機系統版本已更新至最新版本,以及微信App

See all articles