vue中嵌套路由與404重定向如何實(shí)現(xiàn)

這篇文章將為大家詳細(xì)講解有關(guān)vue中嵌套路由與404重定向如何實(shí)現(xiàn)，小編覺(jué)得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。

治多網(wǎng)站建設(shè)公司創(chuàng)新互聯(lián),治多網(wǎng)站設(shè)計(jì)制作，有大型網(wǎng)站制作公司豐富經(jīng)驗(yàn)。已為治多上千提供企業(yè)網(wǎng)站建設(shè)服務(wù)。企業(yè)網(wǎng)站搭建\外貿(mào)營(yíng)銷網(wǎng)站建設(shè)要多少錢，請(qǐng)找那個(gè)售后服務(wù)好的治多做網(wǎng)站的公司定做！

具體如下：

第一部分： vue嵌套路由

嵌套路由是什么？

嵌套路由就是在一個(gè)被路由過(guò)來(lái)的頁(yè)面下可以繼續(xù)使用路由，嵌套也就是路由中的路由的意思。  比如在vue中，我們?nèi)绻皇褂们短茁酚?，那么只有一個(gè)<router-view>，但是如果使用，那么在一個(gè)組件中就還有<router-view>，這也就構(gòu)成了嵌套。

為什么要使用嵌套路由？

就比如在一個(gè)頁(yè)面中， 在頁(yè)面的上半部分，有三個(gè)按鈕，而下半部分是根據(jù)點(diǎn)擊不同的按鈕來(lái)顯示不同的內(nèi)容，那么我們就可以在這個(gè)組件中的下半部分看成是一個(gè)嵌套路由，也就是說(shuō)在這個(gè)組件的下面需要再來(lái)一個(gè)<router-view>， 當(dāng)我點(diǎn)擊不同的按鈕時(shí)，他們的router-link分別所指向的組件就會(huì)被渲染到這個(gè)<router-view>中。

官網(wǎng)是怎么介紹的？

每次說(shuō)到官網(wǎng)，就要說(shuō)一說(shuō)百度，百度搜索千萬(wàn)別用。。

要說(shuō)官網(wǎng)舉得這個(gè)圖，本意是好的，但是描述起來(lái)累贅太多。吐個(gè)槽。。

這就是實(shí)際生活中的一個(gè)很好的應(yīng)用界面， 通常是由多層嵌套的組件組合而成。 同樣的， URL中各段動(dòng)態(tài)路徑也按照某種結(jié)構(gòu)對(duì)應(yīng)嵌套的各層組件。如上所示。

即user表示用戶頁(yè)， 而user就可以看成是vue中的一個(gè)單頁(yè)面，對(duì)于一個(gè)user，一定要有哪一個(gè)用戶，這里的foo（小明、小紅）就代表了一個(gè)用戶，這里的profile可以理解為個(gè)人主頁(yè)，這里的posts可以理解為這個(gè)人所發(fā)表的文章， 而title可能是不變的，比如無(wú)論切換到這個(gè)人發(fā)表的文章，還是切換到這個(gè)人的個(gè)人主頁(yè)，我們都希望在最上方顯示同樣的東西，而在切換的時(shí)候換的就是下面的部分，這個(gè)部分我們就可以用<router-view>來(lái)寫，那么，這，就是嵌套路由。

借助vue-router，使用嵌套路由配置，就可以很簡(jiǎn)單的表達(dá)這種關(guān)系。

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

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

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

從路由配置中，我們可以看到： 當(dāng)路徑是 /user/小明 或者 /user/小紅 時(shí)， 就會(huì)把User渲染到頁(yè)面中，這個(gè)渲染的就是頂級(jí)路由。 （:id就是小明、小紅，）。 然后這個(gè)頁(yè)面中就有一個(gè)嵌套路由，當(dāng)然，如果url就是 /user/小明的話，那么這個(gè)二級(jí)路由是什么都不會(huì)顯示的， 如果我們希望即使只是 /user/小明， 也得渲染點(diǎn)什么，那么我們就可以設(shè)置 path: "" 所對(duì)應(yīng)的路由，這樣，即使 /user/小明 也是可以顯示更多的了。

如果我們想看小明的個(gè)人主頁(yè)，就是 /user/小明/profile 這時(shí)就會(huì)把 UserProfile 組件渲染到這個(gè)二級(jí)路由中了。

如果我們想看小明發(fā)表的文章，就是 /user/小明/posts 這時(shí)就會(huì)把 UserPost 組件渲染到這個(gè)二級(jí)路由中， 這也就是二級(jí)路由了。

其實(shí)概念就這么多，是不是很簡(jiǎn)單呢！

但是還需要注意下面幾點(diǎn)：

1. 從上面的代碼可以看出： 在組件中，我們可以通過(guò) $route.params.id 來(lái)獲取到user/小明/post 中的小明，這樣，我們就可以進(jìn)行個(gè)性化的設(shè)置了。

2. 以 / 開(kāi)頭的嵌套路徑會(huì)被當(dāng)做根路徑， 這可以讓你充分的使用嵌套組件而無(wú)需設(shè)置嵌套的路徑。

也就是說(shuō)： 在上面的代碼中，我們?cè)赾hildren下，寫path: "profile", 就相當(dāng)于拼接成了 /user/:id/profile ，當(dāng)然，我們也可以直接寫為 path: "/user/:id/profile" ，最終的結(jié)果是一樣的，但是我個(gè)人認(rèn)為后者的表示方法可以跟清晰的觀察結(jié)構(gòu)。 如果嵌套層數(shù)過(guò)多，可能會(huì)出錯(cuò)。

第二部分： 404重定向

有時(shí)，我們可能會(huì)輸入錯(cuò)的 url， 或者不再存在等各種原因?qū)е缕洳辉倌鼙辉L問(wèn)，那么我們就可以對(duì)于這種情況進(jìn)行重定向。 很簡(jiǎn)單，只要在路由中添加下面的代碼就可以了：

{
   path: "*",
   redirect: "/"
}

即對(duì)于所有的（*代表所有）錯(cuò)誤頁(yè)面，我們都可以重定向到 "/" 中。

關(guān)于“vue中嵌套路由與404重定向如何實(shí)現(xiàn)”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，使各位可以學(xué)到更多知識(shí)，如果覺(jué)得文章不錯(cuò)，請(qǐng)把它分享出去讓更多的人看到。

文章名稱：vue中嵌套路由與404重定向如何實(shí)現(xiàn)
文章路徑：http://muchs.cn/article20/ipidjo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供建站公司、商城網(wǎng)站、企業(yè)建站、軟件開(kāi)發(fā)、網(wǎng)站內(nèi)鏈、關(guān)鍵詞優(yōu)化

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)