Vue嵌套路由(三层)

Bertha 。 2022-04-10 11:18 918阅读 0赞

小编推荐：Fundebug专注于JavaScript、微信小程序、微信小游戏，Node.js和Java实时BUG监控。真的是一个很好用的bug监控费服务，众多大佬公司都在使用。

Vue嵌套路由：
实现效果(路由三层嵌套，点击一级tab显示二级tab效果，二级tab点击切换对应内容,不在tab区域里的内容，切换时不重复渲染)：

Demo访问时路径：http://IP:端口/#/routers/

![Image 1][]

image.png

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

![Image 1][]

image.png

1 routers/index.vue

  1. <template>
  2.   <div>
  3.       <router-link :to="{name: 'rindex_rhome'}" class="rlink" :class="{active:selected == 1}" @click.native="tabck(1)">首页</router-link>
  4.       <router-link :to="{name: 'rindex_rnews'}" class="rlink" class="{active:selected == 2}" @click.native="tabck(2)">新闻</router-link>
  5.       <router-link :to="{name: 'rindex_ryl'}" class="rlink" class="{active:selected == 3}" @click.native="tabck(3)">娱乐</router-link>
  7.        <!-- 二级子路由页面 -->
  8.         <router-view />
  9.   </div>
  10. </template>
  11. <script>
  12. export default {
  13.   data(){
  14.     return {
  15.           selected: 1
  16.     }
  17.   },
  18.   methods: {
  19.     tabck(index){
  20.         this.selected = index; //设置tab选中项
  21.     }
  22.   }
  23. }
  24. </script>
  25. <style>
  26.   .rlink {
  27.     padding: 5px;
  28.     margin: 5px;
  29.     margin-bottom: 10px;
  30.     display: inline-block;
  31.     text-decoration: none;
  32.     color: blue;
  33.   }
  35.   .rlink.active {
  36.     color: red;
  37.     text-decoration: underline;
  38.   }
  39. </style>

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

  1. <template>
  2.   <div>
  3.       HOME页面信息：<br/>
  4.       <router-link :to="{name: 'rindex_rhome_Rhomezx'}" class="rlink" :class="{active:selected == 1}" @click.native="tabck(1)">最新HOME</router-link>
  5.       <router-link :to="{name: 'rindex_rhome_Rhomegj'}" class="rlink" :class="{active:selected == 2}" @click.native="tabck(2)">国际HOME</router-link>
  6.       <router-link :to="{name: 'rindex_rhome_Rhomegn'}" class="rlink" :class="{active:selected == 3}" @click.native="tabck(3)">国内HOME</router-link>
  8.     <!-- 子路由(三层) -->
  9.       <router-view />
  10.   </div>
  11. </template>
  12. <script>
  13.   export default {
  14.     data(){
  15.         return {
  16.             selected: 1
  17.         }
  18.     },
  19.     methods: {
  20.       tabck(index) {
  21.          this.selected = index; //设置选中tab
  22.       }
  23.     }
  24.   }
  25. </script>
  26. <style>
  27. </style>

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

  1. gj.vue：
  3. <template>
  4.   <div>
  5.         国际HOME信息：<br/>
  6.          <ul >
  7.              <li v-for="(result, index) in list" :key="index">{
  8.    {result.name}}{
  9.    {index}}</li>
  10.          </ul>
  11.   </div>
  12. </template>
  13. <script>
  14.   export default {
  15.     data(){
  16.       return {
  17.           list: [
  18.             {name:'国际HOME'},
  19.             {name:'国际HOME'},
  20.             {name:'国际HOME'}
  21.           ]
  22.       }
  23.     }
  24.   }
  25. </script>
  28. gn.vue :
  30. <template>
  31.   <div>
  32.         国内HOME信息：<br/>
  33.          <ul >
  34.              <li v-for="(result, index) in list" :key="index">{
  35.    {result.name}}{
  36.    {index}}</li>
  37.          </ul>
  38.   </div>
  39. </template>
  40. <script>
  41.   export default {
  42.     data(){
  43.       return {
  44.           list: [
  45.             {name:'国内HOME'},
  46.             {name:'国内HOME'}
  47.           ]
  48.       }
  49.     }
  50.   }
  51. </script>
  53. zx.vue：
  55. <template>
  56.   <div>
  57.         最新HOME信息：<br/>
  58.          <ul >
  59.              <li v-for="(result, index) in list" :key="index">{
  60.    {result.name}}{
  61.    {index}}</li>
  62.          </ul>
  63.   </div>
  64. </template>
  65. <script>
  66.   export default {
  67.     data(){
  68.       return {
  69.           list: [
  70.             {name:'最新HOME'}
  71.           ]
  72.       }
  73.     }
  74.   }
  75. </script>

1-2 routers/news/index.vue

  1. <template>
  2.   <div>
  3.        新闻页面信息：<br/>
  4.         <router-link class="rlink" :class="{active:selected == 1}" @cllick.native="tabck(1)">最新新闻</router-link>
  5.         <router-link class="rlink" :class="{active:selected == 2}" @cllick.native="tabck(2)">国际新闻</router-link>
  6.         <router-link class="rlink" :class="{active:selected == 3}" @cllick.native="tabck(3)">国内新闻</router-link>
  7.     <!-- 子路由 -->
  8.     <router-view/>
  9.   </div>
  10. </template>
  11. <script>
  12.   export default {
  13.     data () {
  14.       return {
  15.           selected: 1
  16.       }
  17.     },
  18.     methods: {
  19.       tabck(index){
  20.         this.selected = index; //切换tab，设置选中项
  21.       }
  22.     } 
  23.   }
  24. </script>

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

  1. gj.vue：
  3. <template>
  4.   <div>
  5.         国际新闻信息：<br/>
  6.          <ul >
  7.              <li v-for="(result, index) in list" :key="index">{
  8.    {result.name}}{
  9.    {index}}</li>
  10.          </ul>
  11.   </div>
  12. </template>
  13. <script>
  14.   export default {
  15.     data(){
  16.       return {
  17.           list: [
  18.             {name:'国际新闻信息'},
  19.             {name:'国际新闻信息'},
  20.             {name:'国际新闻信息'},
  21.             {name:'国际新闻信息'},
  22.             {name:'国际新闻信息'}
  23.           ]
  24.       }
  25.     }
  26.   }
  27. </script>
  29. gn.vue：
  31. <template>
  32.   <div>
  33.         国内新闻信息：<br/>
  34.          <ul >
  35.              <li v-for="(result, index) in list" :key="index">{
  36.    {result.name}}{
  37.    {index}}</li>
  38.          </ul>
  39.   </div>
  40. </template>
  41. <script>
  42.   export default {
  43.     data(){
  44.       return {
  45.           list: [
  46.             {name:'国内新闻信息'},
  47.             {name:'国内新闻信息'}
  48.           ]
  49.       }
  50.     }
  51.   }
  52. </script>
  54. zx.vue：
  56. <template>
  57.   <div>
  58.         最新新闻信息：<br/>
  59.          <ul >
  60.              <li v-for="(result, index) in list" :key="index">{
  61.    {result.name}}{
  62.    {index}}</li>
  63.          </ul>
  64.   </div>
  65. </template>
  66. <script>
  67.   export default {
  68.     data(){
  69.       return {
  70.           list: [
  71.             {name:'最新新闻信息'},
  72.             {name:'最新新闻信息'}
  73.           ]
  74.       }
  75.     }
  76.   }
  77. </script>

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

  1. <template>
  2.   <div>
  3.         娱乐页面信息：<br/>
  4.         <router-link class="rlink" :class="{active:selected == 1}" @click.native="tabck(1)">最新娱乐</router-link>
  5.         <router-link class="rlink" :class="{active:selected == 2}" @click.native="tabck(2)">明星娱乐</router-link>
  6.         <router-link class="rlink" :class="{active:selected == 3}" @click.native="tabck(3)">焦点娱乐</router-link>
  8.         <!-- 子路由-->
  9.         <router-view/>
  10.   </div>
  11.   <script>
  12.     export default {
  13.       data(){
  14.         return {
  15.           selected: 1
  16.         }
  17.       },
  18.       methods: {
  19.         tabck(index){
  20.           this.selected = index; //设置tab选中项
  21.         }
  22.       }
  23.     }
  24.   </script>
  25. </template>

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

  1. jd.vue：
  2. <template>
  3.   <div>
  4.         焦点娱乐信息：<br/>
  5.          <ul >
  6.              <li v-for="(result, index) in list" :key="index">{
  7.    {result.name}}{
  8.    {index}}</li>
  9.          </ul>
  10.   </div>
  11. </template>
  12. <script>
  13.   export default {
  14.     data(){
  15.       return {
  16.           list: [
  17.             {name:'焦点娱乐信息'},
  18.             {name:'焦点娱乐信息'}
  19.           ]
  20.       }
  21.     }
  22.   }
  23. </script>
  25. mx.vue：
  27. <template>
  28.   <div>
  29.         明星娱乐信息：<br/>
  30.          <ul >
  31.              <li v-for="(result, index) in list" :key="index">{
  32.    {result.name}}{
  33.    {index}}</li>
  34.          </ul>
  35.   </div>
  36. </template>
  37. <script>
  38.   export default {
  39.     data(){
  40.       return {
  41.           list: [
  42.             {name:'明星娱乐信息'},
  43.             {name:'明星娱乐信息'}
  44.           ]
  45.       }
  46.     }
  47.   }
  48. </script>
  50. zx.vue：
  52. <template>
  53.   <div>
  54.         最新娱乐信息：<br/>
  55.          <ul >
  56.              <li v-for="(result, index) in list" :key="index">{
  57.    {result.name}}{
  58.    {index}}</li>
  59.          </ul>
  60.   </div>
  61. </template>
  62. <script>
  63.   export default {
  64.     data(){
  65.       return {
  66.           list: [
  67.             {name:'最新娱乐信息'},
  68.             {name:'最新娱乐信息'}
  69.           ]
  70.       }
  71.     }
  72.   }
  73. </script>

2.路由配置规则(router/index.js)

  1. ....
  2.   省略导入路由、使用路由代码...
  3. ....
  4. // 嵌套路由的使用：第一层
  5. import Rindex from '../page/routers/index'
  6. // 嵌套路由的使用：第二层
  7. import Rhome from '../page/routers/home/index'
  8. // 嵌套路由的使用：第三层
  9. import Rhomezx from '../page/routers/home/tab/zx'
  10. import Rhomegj from '../page/routers/home/tab/gj'
  11. import Rhomegn from '../page/routers/home/tab/gn'
  13. import Rnews from '../page/routers/news/index'
  14. import Rnewszx from '../page/routers/news/tab/zx'
  15. import Rnewsgj from '../page/routers/news/tab/gj'
  16. import Rnewsgn from '../page/routers/news/tab/gn'
  18. import Ryl from '../page/routers/yl/index'
  19. import Rylzx from '../page/routers/yl/tab/zx'
  20. import Rylmx from '../page/routers/yl/tab/mx'
  21. import Ryljd from '../page/routers/yl/tab/jd'
  23. // 路由规则配置：
  24. export default new Router({
  25.   routes : [
  26.     {
  27.       name: 'rindex',
  28.       path: '/routers',
  29.       component: Rindex,
  30.       redirect: {name: 'rindex_rhome'}, // 跳转到下一级第一个
  31.       children: [
  32.          {
  33.              name: 'rindex_rhome',
  34.              path: 'rindex_rhome', //如果这里不使用 "/rhome" 则表示是归属于上级路由（上级luyou/子path），如果使用 "/rhome" 则表示根路径下访问
  35.              component: Rhome,
  36.              redirect: {name: 'rindex_rhome_Rhomezx'}, //跳转到下级第一层
  37.              children: [
  38.                 {
  39.                   name: 'rindex_rhome_Rhomezx',
  40.                   path: 'rindex_rhome_Rhomezx',
  41.                   component: Rhomezx
  42.                 },
  43.                 {
  44.                   name: 'rindex_rhome_Rhomegj',
  45.                   path: 'rindex_rhome_Rhomegj',
  46.                   component: Rhomegj
  47.                 },
  48.                 {
  49.                   name: 'rindex_rhome_Rhomegn',
  50.                   path: 'rindex_rhome_Rhomegn',
  51.                   component: Rhomegn
  52.                 }
  53.             ]
  54.          },
  55.          {
  56.             name: 'rindex_rnews',
  57.             path: 'rindex_rnews',
  58.             component: Rnews,
  59.             redirect: {name: 'rindex_rnews_Rnewszx'},
  60.             children: [
  61.               {
  62.                   name: 'rindex_rnews_Rnewszx',
  63.                   path: 'rindex_rnews_Rnewszx',
  64.                   component: Rnewszx
  65.               },
  66.               {
  67.                   name: 'rindex_rnews_Rnewsgj',
  68.                   path: 'rindex_rnews_Rnewsgj',
  69.                   component: Rnewsgj
  70.               },
  71.               {
  72.                   name: 'rindex_rnews_Rnewsgn',
  73.                   path: 'rindex_rnews_Rnewsgn',
  74.                   component: Rnewsgn
  75.               }
  76.             ]
  77.         },
  78.         {
  79.             name: 'rindex_ryl',
  80.             path: 'rindex_ryl',
  81.             component: Ryl,
  82.             redirect: {name: 'rindex_ryl_rylzx'},
  83.             chidren:[
  84.                 {
  85.                     name: 'rindex_ryl_rylzx',
  86.                     path: 'rindex_ryl_rylzx',
  87.                     component: Rylzx
  88.                 },
  89.                 {
  90.                     name: 'rindex_ryl_rylmx',
  91.                     path: 'rindex_ryl_rylmx',
  92.                     component: Rylmx
  93.                 },
  94.                 {
  95.                     name: 'rindex_ryl_ryljd',
  96.                     path: 'rindex_ryl_ryljd',
  97.                     component: Ryljd
  98.                 }
  99.             ]
  100.         }
  101.       ]
  102.     }
  103.   ]
  104. });

作者：圆梦人生
链接：https://www.jianshu.com/p/e1932903cfca

关于Fundebug

Fundebug专注于JavaScript、微信小程序、微信小游戏、支付宝小程序、React Native、Node.js和Java实时BUG监控。 自从2016年双十一正式上线，Fundebug累计处理了9亿+错误事件，得到了Google、360、金山软件、百姓网等众多知名用户的认可。欢迎免费试用！

2018121912254161

[Image 1]:

发表评论

表情：
评论列表 （有 0 条评论，918人围观）

还没有评论，来说两句吧...

相关阅读

    相关 Vue 嵌套路由

    文章目录 嵌套路由 具体实现 嵌套路由 说白了就是选项卡中又嵌套一个选项卡。 可以看看官方的例子 [传送门][Link 1] 具体

    桃扇骨桃扇骨/ 0 赞/ 98 阅读

    相关 Vue中路由嵌套（子路由）

    路由的嵌套就是点击一个路由地址后，继续点击，进入到另外一个路由地址下，即第二个路由就是第一个路由的子路由。 根据我们前面学习的VueRouter的知识，可以直接写出代码来实

    野性酷女野性酷女/ 0 赞/ 349 阅读

    相关 Vue嵌套路由(三层)

    > 小编推荐：[Fundebug][]专注于JavaScript、微信小程序、微信小游戏，Node.js和Java实时BUG监控。真的是一个很好用的bug监控费服务，众多大佬公

    Bertha 。Bertha 。/ 0 赞/ 919 阅读