本篇文章為大家展示了怎么在Vue中實現(xiàn)三層嵌套路由，內(nèi)容簡明扼要并且容易理解，絕對能使你眼前一亮，通過這篇文章的詳細介紹希望你能有所收獲。

創(chuàng)新互聯(lián)網(wǎng)站建設(shè)提供從項目策劃、軟件開發(fā)，軟件安全維護、網(wǎng)站優(yōu)化(SEO)、網(wǎng)站分析、效果評估等整套的建站服務(wù)，主營業(yè)務(wù)為網(wǎng)站制作、成都網(wǎng)站設(shè)計，重慶App定制開發(fā)以傳統(tǒng)方式定制建設(shè)網(wǎng)站，并提供域名空間備案等一條龍服務(wù)，秉承以專業(yè)、用心的態(tài)度為用戶提供真誠的服務(wù)。創(chuàng)新互聯(lián)深信只要達到每一位用戶的要求，就會得到認可，從而選擇與我們長期合作。這樣，我們也可以走得更遠！

Vue嵌套路由：

實現(xiàn)效果(路由三層嵌套，點擊一級tab顯示二級tab效果，二級tab點擊切換對應(yīng)內(nèi)容,不在tab區(qū)域里的內(nèi)容，切換時不重復(fù)渲染)：

Demo訪問時路徑：http://IP:端口/#/routers/

1.建立案例文件夾 page/routers/

1 routers/index.vue

1-1-1 routers/home/index.vue

1-1-2 routers/home/tab/gj.vue、gn.vue、zx.vue

gj.vue：

gn.vue :

zx.vue：

1-2 routers/news/index.vue

1-2-1 routers/news/tab/gj.vue、gn.vue、zx.vue

gj.vue：

gn.vue：

zx.vue：

1-3-1 routers/yl/index.vue

1-3-2 routers/yl/tab/jd.vue、mx.vue、zx.vue

jd.vue：

mx.vue：

zx.vue：

2.路由配置規(guī)則(router/index.js)

....
 省略導(dǎo)入路由、使用路由代碼...
....
// 嵌套路由的使用：第一層
import Rindex from '../page/routers/index'
// 嵌套路由的使用：第二層
import Rhome from '../page/routers/home/index'
// 嵌套路由的使用：第三層
import Rhomezx from '../page/routers/home/tab/zx'
import Rhomegj from '../page/routers/home/tab/gj'
import Rhomegn from '../page/routers/home/tab/gn'
import Rnews from '../page/routers/news/index'
import Rnewszx from '../page/routers/news/tab/zx'
import Rnewsgj from '../page/routers/news/tab/gj'
import Rnewsgn from '../page/routers/news/tab/gn'
import Ryl from '../page/routers/yl/index'
import Rylzx from '../page/routers/yl/tab/zx'
import Rylmx from '../page/routers/yl/tab/mx'
import Ryljd from '../page/routers/yl/tab/jd'
// 路由規(guī)則配置：
export default new Router({
 routes : [
  {
   name: 'rindex',
   path: '/routers',
   component: Rindex,
   redirect: {name: 'rindex_rhome'}, // 跳轉(zhuǎn)到下一級第一個
   children: [
     {
       name: 'rindex_rhome',
       path: 'rindex_rhome', //如果這里不使用 "/rhome" 則表示是歸屬于上級路由（上級luyou/子path），如果使用 "/rhome" 則表示根路徑下訪問
       component: Rhome,
       redirect: {name: 'rindex_rhome_Rhomezx'}, //跳轉(zhuǎn)到下級第一層
       children: [
        {
         name: 'rindex_rhome_Rhomezx',
         path: 'rindex_rhome_Rhomezx',
         component: Rhomezx
        },
        {
         name: 'rindex_rhome_Rhomegj',
         path: 'rindex_rhome_Rhomegj',
         component: Rhomegj
        },
        {
         name: 'rindex_rhome_Rhomegn',
         path: 'rindex_rhome_Rhomegn',
         component: Rhomegn
        }
      ]
     },
     {
      name: 'rindex_rnews',
      path: 'rindex_rnews',
      component: Rnews,
      redirect: {name: 'rindex_rnews_Rnewszx'},
      children: [
       {
         name: 'rindex_rnews_Rnewszx',
         path: 'rindex_rnews_Rnewszx',
         component: Rnewszx
       },
       {
         name: 'rindex_rnews_Rnewsgj',
         path: 'rindex_rnews_Rnewsgj',
         component: Rnewsgj
       },
       {
         name: 'rindex_rnews_Rnewsgn',
         path: 'rindex_rnews_Rnewsgn',
         component: Rnewsgn
       }
      ]
    },
    {
      name: 'rindex_ryl',
      path: 'rindex_ryl',
      component: Ryl,
      redirect: {name: 'rindex_ryl_rylzx'},
      chidren:[
        {
          name: 'rindex_ryl_rylzx',
          path: 'rindex_ryl_rylzx',
          component: Rylzx
        },
        {
          name: 'rindex_ryl_rylmx',
          path: 'rindex_ryl_rylmx',
          component: Rylmx
        },
        {
          name: 'rindex_ryl_ryljd',
          path: 'rindex_ryl_ryljd',
          component: Ryljd
        }
      ]
    }
   ]
  }
 ]
});

上述內(nèi)容就是怎么在Vue中實現(xiàn)三層嵌套路由，你們學(xué)到知識或技能了嗎？如果還想學(xué)到更多技能或者豐富自己的知識儲備，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。