vue中嵌套路由與404重定向如何實現(xiàn)-創(chuàng)新互聯(lián)

這篇文章將為大家詳細講解有關vue中嵌套路由與404重定向如何實現(xiàn)，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。

目前創(chuàng)新互聯(lián)建站已為千余家的企業(yè)提供了網站建設、域名、網絡空間、網站托管維護、企業(yè)網站設計、拉孜網站維護等服務，公司將堅持客戶導向、應用為本的策略，正道將秉承"和諧、參與、激情"的文化，與客戶和合作伙伴齊心協(xié)力一起成長，共同發(fā)展。

具體如下：

第一部分： vue嵌套路由

嵌套路由是什么？

嵌套路由就是在一個被路由過來的頁面下可以繼續(xù)使用路由，嵌套也就是路由中的路由的意思。比如在vue中，我們如果不使用嵌套路由，那么只有一個，但是如果使用，那么在一個組件中就還有，這也就構成了嵌套。

為什么要使用嵌套路由？

就比如在一個頁面中，在頁面的上半部分，有三個按鈕，而下半部分是根據點擊不同的按鈕來顯示不同的內容，那么我們就可以在這個組件中的下半部分看成是一個嵌套路由，也就是說在這個組件的下面需要再來一個，當我點擊不同的按鈕時，他們的router-link分別所指向的組件就會被渲染到這個中。

官網是怎么介紹的？

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

vue中嵌套路由與404重定向如何實現(xiàn)

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

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

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

借助vue-router，使用嵌套路由配置，就可以很簡單的表達這種關系。

const User = {
 template: `
  
   User {{ $route.params.id }}

` } const router = new VueRouter({ routes: [ { path: '/user/:id', component: User, children: [ { // 當 /user/:id/profile 匹配成功， // UserProfile 會被渲染在 User 的中 path: 'profile', component: UserProfile }, { // 當 /user/:id/posts 匹配成功 // UserPosts 會被渲染在 User 的中 path: 'posts', component: UserPosts }， // 當 /user/:id 匹配成功， // UserHome 會被渲染在 User 的中 { path: '', component: UserHome }, // ...其他子路由 ] } ] })

OK！這大致就是嵌套路由了！其中，第一段代碼是在文件中放了，這是最頂層的出口，渲染高級路由匹配到的組件。

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

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

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

其實概念就這么多，是不是很簡單呢！

但是還需要注意下面幾點：

1. 從上面的代碼可以看出：在組件中，我們可以通過 $route.params.id 來獲取到user/小明/post 中的小明，這樣，我們就可以進行個性化的設置了。

2. 以 / 開頭的嵌套路徑會被當做根路徑，這可以讓你充分的使用嵌套組件而無需設置嵌套的路徑。

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

第二部分： 404重定向

有時，我們可能會輸入錯的 url，或者不再存在等各種原因導致其不再能被訪問，那么我們就可以對于這種情況進行重定向。很簡單，只要在路由中添加下面的代碼就可以了：

{
   path: "*",
   redirect: "/"
}

即對于所有的（*代表所有）錯誤頁面，我們都可以重定向到 "/" 中。

關于“vue中嵌套路由與404重定向如何實現(xiàn)”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，使各位可以學到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。

另外有需要云服務器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內外云服務器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務器、裸金屬服務器、高防服務器、香港服務器、美國服務器、虛擬主機、免備案服務器”等云主機租用服務以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務可用性高、性價比高”等特點與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應用場景需求。

分享名稱：vue中嵌套路由與404重定向如何實現(xiàn)-創(chuàng)新互聯(lián)
路徑分享：http://weahome.cn/article/ddoipd.html

真实的国产乱ⅩXXX66竹夫人,五月香六月婷婷激情综合,亚洲日本VA一区二区三区,亚洲精品一区二区三区麻豆

vue中嵌套路由與404重定向如何實現(xiàn)-創(chuàng)新互聯(lián)

User {{ $route.params.id }}

其他資訊

網站制作

企業(yè)服務

網站建設

服務器托管