vue巢狀路由總結

巢狀路由就是在乙個被路由過來的頁面下可以繼續使用路由，巢狀也就是路由中的路由的意思。  

比如在vue中，我們如果不使用巢狀路由，那麼只有乙個，但是如果使用，那麼在乙個元件中就還有，這也就構成了巢狀。

1、為什麼要使用巢狀路由？

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

2、官網是怎麼介紹的？

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

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

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

"

">
const user =

const router = new

vuerouter(,
，//當 /user/:id 匹配成功，
//userhome 會被渲染在 user 的 中
,//
...其他子路由 
] }
]}) 

然後這個頁面中就有乙個巢狀路由，當然，如果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" ，最終的結果是一樣的，但是我個人認為後者的表示方法可以跟清晰的觀察結構。 如果巢狀層數過多，可能會出錯。 

3、注意需要匹配乙個空的情況，然後匹配乙個default元件，避免出現空白頁的問題。

暫時就這麼多，以後想起再總結

第2點需要特別注意，子路由是不能加"/"的，加了的話，就匹配不了了，而是匹配到根路由去了。

Vue巢狀路由

src components index page index2 router index.js main.js html部分 2級頁面在此顯示 import vue from vue import router from router 引入router.js import vuex from vu...

vue 巢狀路由

在乙個頁面中如果想實現三個頁面的拼接組成乙個頁面，這時候就用到巢狀路由了。第一種方法 1.頂部頁面 views home.vue class drophead 個人資訊 退出2.左側欄頁面 view menusecond.vue 3.右側欄頁面 view menuthird.vue 需簽約檢視 路由...

vue巢狀路由

在實際專案中我們會碰到多層巢狀的元件組合而成，但是我們如何實現巢狀路由呢？因此我們需要在 vuerouter 的引數中使用 children 配置，這樣就可以很好的實現路由巢狀。index.html，只有乙個路由出口 1 div id 23 router view router view 4div ...