vue嵌套路由的概念是什么

今天小編給大家分享一下vue嵌套路由的概念是什么的相關(guān)知識(shí)點(diǎn)，內(nèi)容詳細(xì)，邏輯清晰，相信大部分人都還太了解這方面的知識(shí)，所以分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后有所收獲，下面我們一起來了解一下吧。

vue嵌套路由的含義是：在一個(gè)路由的頁面下，繼續(xù)使用路由加載新的組件；可以將嵌套路由理解為父子路由，常見的多導(dǎo)航界面通常就是由多層嵌套的組件組合而成。

本文操作環(huán)境：windows10系統(tǒng)、Vue2.9.6版，DELL G3電腦。

vue嵌套路由的含義是什么

嵌套路由就是在一個(gè)被路由過來的頁面下可以繼續(xù)使用路由，嵌套也就是路由中的路由的意思。

在實(shí)際項(xiàng)目中，多個(gè)前端頁面由于需求而通常由多層嵌套的組件組合而成,尤其是多導(dǎo)航界面。此時(shí)，路由嵌套(vue-router)的優(yōu)點(diǎn)則表現(xiàn)了出來。

嵌套路由就是在一個(gè)被路由過來的頁面下，所謂嵌套，也可以理解成父子路由。

為什么要使用嵌套路由

　　 就比如在一個(gè)頁面中， 在頁面的上半部分，有三個(gè)按鈕，而下半部分是根據(jù)點(diǎn)擊不同的按鈕來顯示不同的內(nèi)容，那么我們就可以在這個(gè)組件中的下半部分看成是一個(gè)嵌套路由，也就是說在這個(gè)組件的下面需要再來一個(gè)<router-view>， 當(dāng)我點(diǎn)擊不同的按鈕時(shí)，他們的router-link分別所指向的組件就會(huì)被渲染到這個(gè)<router-view>中。

官網(wǎng)是怎么介紹的

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

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

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

<div id="app">
  <router-view></router-view>
</div>
const User = {
  template: `
    <div class="user">
      <h3>User {{ $route.params.id }}</h3>
      <router-view></router-view>
    </div>
  `
}

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

　　這大致就是嵌套路由了！ 其中，第一段代碼是在文件中放了<router-view>， 這是最頂層的出口，渲染高級(jí)路由匹配到的組件。

　　從路由配置中，我們可以看到： 當(dāng)路徑是 /user/小明 或者 /user/小紅 時(shí)， 就會(huì)把User渲染到頁面中，這個(gè)渲染的就是頂級(jí)路由。 （:id就是小明、小紅，）。

　　然后這個(gè)頁面中就有一個(gè)嵌套路由，當(dāng)然，如果url就是 /user/小明的話，那么這個(gè)二級(jí)路由是什么都不會(huì)顯示的， 如果我們希望即使只是 /user/小明， 也得渲染點(diǎn)什么，那么我們就可以設(shè)置 path: "" 所對(duì)應(yīng)的路由，這樣，即使 /user/小明 也是可以顯示更多的了。

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

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

　　其實(shí)概念就這么多，是不是很簡單呢。

　　但是還需要注意下面幾點(diǎn)：

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

　　2、以 / 開頭的嵌套路徑會(huì)被當(dāng)做根路徑， 這可以讓你充分的使用嵌套組件而無需設(shè)置嵌套的路徑。

　　也就是說： 在上面的代碼中，我們?cè)赾hildren下，寫path: "profile", 就相當(dāng)于拼接成了 /user/:id/profile ，當(dāng)然，我們也可以直接寫為 path: "/user/:id/profile" ，最終的結(jié)果是一樣的，但是我個(gè)人認(rèn)為后者的表示方法可以跟清晰的觀察結(jié)構(gòu)。 如果嵌套層數(shù)過多，可能會(huì)出錯(cuò)。

　　3、注意需要匹配一個(gè)空的情況，然后匹配一個(gè)default組件，避免出現(xiàn)空白頁的問題。

以上就是“vue嵌套路由的概念是什么”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會(huì)為大家更新不同的知識(shí)，如果還想學(xué)習(xí)更多的知識(shí)，請(qǐng)關(guān)注億速云行業(yè)資訊頻道。