這篇文章主要介紹了vue嵌套路由與404重定向實現方法,結合實例形式分析了vue.js嵌套路由與404重定向的概念、原理、實現步驟與相關操作技巧,需要的朋友可以參考下
本文實例講述了vue嵌套路由與404重定向實作方法。分享給大家供大家參考，具體如下：
第一部分： vue巢狀路由
##巢狀路由是什麼？
嵌套路由就是在一個被路由過來的頁面下可以繼續使用路由，嵌套也就是路由中的路由的意思。例如在vue中，我們如果不使用嵌套路由，那麼只有一個，但如果使用，那麼在一個元件中就還有，這也就構成了嵌套。
為什麼要使用巢狀路由？
就例如在一個頁面中， 在頁面的上半部分，有三個按鈕，而下半部分是根據點擊不同的按鈕來顯示不同的內容，那麼我們就可以在這個元件中的下半部看成是一個嵌套路由，也就是說在這個元件的下面需要再來一個， 當我點擊不同的按鈕時，他們的 router-link分別所指向的元件就會被渲染到這個中。
官網是怎麼介紹的？
每次說到官網，就要說一說百度，百度搜尋千萬別用。 。
<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
},
// ...其他子路由
]
}
]
})， 這是最頂層的出口，渲染高階路由符合的元件。
但還需要注意下面幾點：
1. 從上面的程式碼可以看出： 在元件中，我們可以透過$route.params .id 來取得到user/小明/post 中的小明，這樣，我們就可以進行個人化的設定了。
也就是說： 在上面的程式碼中，我們在children下，寫path: "profile", 就相當於拼接成了/user/:id/profile ，當然，我們也可以直接寫為path: "/user/:id/profile" ，最終的結果是一樣的，但是我個人認為後者的表示方法可以跟清晰的觀察結構。如果嵌套層數過多，可能會出錯。
第二部分： 404重定向#
有时，我们可能会输入错的 url， 或者不再存在等各种原因导致其不再能被访问，那么我们就可以对于这种情况进行重定向。 很简单，只要在路由中添加下面的代码就可以了：
{
path: "*",
redirect: "/"
}即对于所有的（*代表所有）错误页面，我们都可以重定向到 "/" 中。
相关推荐：
以上是vue嵌套路由與404重定向實作方法分析的詳細內容。更多資訊請關注PHP中文網其他相關文章！
