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

第一部分： vue嵌套路由

嵌套路由是什麼？

嵌套路由就是在一個被路由過來的頁面下能夠繼續使用路由，嵌套也就是路由中的路由的意思。 好比在vue中，咱們若是不使用嵌套路由，那麼只有一個<router-view>，可是若是使用，那麼在一個組件中就還有<router-view>，這也就構成了嵌套。

爲何要使用嵌套路由？

就好比在一個頁面中， 在頁面的上半部分，有三個按鈕，而下半部分是根據點擊不一樣的按鈕來顯示不一樣的內容，那麼咱們就能夠在這個組件中的下半部分當作是一個嵌套路由，也就是說在這個組件的下面須要再來一個<router-view>， 當我點擊不一樣的按鈕時，他們的router-link分別所指向的組件就會被渲染到這個<router-view>中。

官網是怎麼介紹的？

每次說到官網，就要說一說百度，百度搜索千萬別用。。 要說官網舉得這個圖，本意是好的，可是描述起來累贅太多。吐個槽。。

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

即user表示用戶頁， 而user就能夠當作是vue中的一個單頁面，對於一個user，必定要有哪個用戶，這裏的foo（小明、小紅）就表明了一個用戶，這裏的profile能夠理解爲我的主頁，這裏的posts能夠理解爲這我的所發表的文章， 而title多是不變的，好比不管切換到這我的發表的文章，仍是切換到這我的的我的主頁，咱們都但願在最上方顯示一樣的東西，而在切換的時候換的就是下面的部分，這個部分咱們就能夠用<router-view>來寫，那麼，這，就是嵌套路由。

藉助vue-router，使用嵌套路由配置，就能夠很簡單的表達這種關係。

<div id="app">
 <router-view></router-view>
</div>

前端全棧學習交流圈：866109386,面向1-3經驗年前端開發人員,幫助突破技術瓶頸，提高思惟能力,羣內有大量PDF可供自取，更有乾貨實戰項目視頻進羣免費領取。

const User = {
 template: `
  <div class="user">
   <h2>User {{ $route.params.id }}</h2>
   <router-view></router-view>
  </div>
 `
}
const router = new VueRouter({
 routes: [
  { path: '/user/:id', component: User,
   children: [
    {
     // 當 /user/:id/profile 匹配成功，
     // UserProfile 會被渲染在 User 的 <router-view> 中
     path: 'profile',
     component: UserProfile
    },
    {
     // 當 /user/:id/posts 匹配成功
     // UserPosts 會被渲染在 User 的 <router-view> 中
     path: 'posts',
     component: UserPosts
    }，
    // 當 /user/:id 匹配成功，
    // UserHome 會被渲染在 User 的 <router-view> 中
    {
      path: '',
      component: UserHome
    },
     // ...其餘子路由
   ]
  }
 ]
})

前端全棧學習交流圈：866109386,面向1-3經驗年前端開發人員,幫助突破技術瓶頸，提高思惟能力,羣內有大量PDF可供自取，更有乾貨實戰項目視頻進羣免費領取。

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

從路由配置中，咱們能夠看到： 當路徑是 /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: "/"
}

即對於全部的（*表明全部）錯誤頁面，咱們均可以重定向到 "/" 中。 但願本文所述對你們vue.js程序設計有所幫助。