首頁 > 文章 > web前端 > vue嵌套路由與404重定向實作方法分析

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

不言原創: 2018-05-05 14:12:471420瀏覽

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

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

第一部分： vue巢狀路由

##巢狀路由是什麼？

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

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

為什麼要使用巢狀路由？

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

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

官網是怎麼介紹的？

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

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

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

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

借助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！這大致就是嵌套路由了！其中，第一段程式碼是在檔案中放了

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

從路由設定中，我們可以看到：當路徑是 /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嵌套路由與404重定向實作方法分析

相關文章