vue巢狀路由與404重定向實作方法分析_vue.js
- php中世界最好的语言原創
- 2018-05-23 15:10:351702瀏覽
這次為大家帶來怎樣使用vue嵌套路由，使用vue嵌套路由的注意事項有哪些，下面就是實戰案例，一起來看一下。
第一部分： 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，使用巢狀路由配置，就可以很簡單的表達這種關係。
<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: '/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
},
// ...其他子路由
]
}
]
})
OK！這大致就是嵌套路由了！其中，第一段程式碼是在檔案中放了<router-view>， 這是最頂層的出口，渲染高階路由符合的元件。
從路由設定中，我們可以看到： 當路徑是 /user/小明 或 /user/小紅 時， 就會把User渲染到頁面中，這個渲染的就是頂層路由。 （:id就是小明、小紅，）。然後這個頁面中就有一個嵌套路由，當然，如果url就是/user/小明的話，那麼這個二級路由是什麼都不會顯示的， 如果我們希望即使只是/user/小明， 也得渲染點什麼，那麼我們就可以設定path: "" 所對應的路由，這樣，即使/user/小明也是可以顯示更多的了。
如果我們想看小明的個人主頁，就是 /user/小明/profile 這時就會把 UserProfile 元件渲染到這個二級路由了。
如果我們想看小明發表的文章，就是 /user/小明/posts 這時就會把 UserPost 元件渲染到這個二級路由中， 這也就是二級路由了。
其實概念就這麼多，是不是很簡單呢！
相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！
推薦閱讀：
以上是vue巢狀路由與404重定向實作方法分析_vue.js的詳細內容。更多資訊請關注PHP中文網其他相關文章！