Vue嵌套路由(三层)

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

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

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

Demo访问时路径：[http://IP][http_IP]:端口/\#/routers/

![Image 1][]

image.png

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

![Image 1][]

image.png

1 routers/index.vue

<template>
      <div>
          <router-link :to="{name: 'rindex_rhome'}" class="rlink" :class="{active:selected == 1}" @click.native="tabck(1)">首页</router-link>
          <router-link :to="{name: 'rindex_rnews'}" class="rlink" class="{active:selected == 2}" @click.native="tabck(2)">新闻</router-link>
          <router-link :to="{name: 'rindex_ryl'}" class="rlink" class="{active:selected == 3}" @click.native="tabck(3)">娱乐</router-link>
        
           
            <router-view />
      </div>
    </template>
    <script>
    export default {
      data(){
        return {
              selected: 1
        }
      },
      methods: {
        tabck(index){
            this.selected = index; //设置tab选中项
        }
      }
    }
    </script>
    <style>
      .rlink {
        padding: 5px;
        margin: 5px;
        margin-bottom: 10px;
        display: inline-block;
        text-decoration: none;
        color: blue;
      }
    
      .rlink.active {
        color: red;
        text-decoration: underline;
      }
    </style>

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

<template>
      <div>
          HOME页面信息：<br/>
          <router-link :to="{name: 'rindex_rhome_Rhomezx'}" class="rlink" :class="{active:selected == 1}" @click.native="tabck(1)">最新HOME</router-link>
          <router-link :to="{name: 'rindex_rhome_Rhomegj'}" class="rlink" :class="{active:selected == 2}" @click.native="tabck(2)">国际HOME</router-link>
          <router-link :to="{name: 'rindex_rhome_Rhomegn'}" class="rlink" :class="{active:selected == 3}" @click.native="tabck(3)">国内HOME</router-link>
        
        
          <router-view />
      </div>
    </template>
    <script>
      export default {
        data(){
            return {
                selected: 1
            }
        },
        methods: {
          tabck(index) {
             this.selected = index; //设置选中tab
          }
        }
      }
    </script>
    <style>
    </style>

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

gj.vue：
    
    <template>
      <div>
            国际HOME信息：<br/>
             <ul >
                 <li v-for="(result, index) in list" :key="index">{
       {result.name}}{
       {index}}</li>
             </ul>
      </div>
    </template>
    <script>
      export default {
        data(){
          return {
              list: [
                {name:'国际HOME'},
                {name:'国际HOME'},
                {name:'国际HOME'}
              ]
          }
        }
      }
    </script>
    
    
    gn.vue :
    
    <template>
      <div>
            国内HOME信息：<br/>
             <ul >
                 <li v-for="(result, index) in list" :key="index">{
       {result.name}}{
       {index}}</li>
             </ul>
      </div>
    </template>
    <script>
      export default {
        data(){
          return {
              list: [
                {name:'国内HOME'},
                {name:'国内HOME'}
              ]
          }
        }
      }
    </script>
    
    zx.vue：
    
    <template>
      <div>
            最新HOME信息：<br/>
             <ul >
                 <li v-for="(result, index) in list" :key="index">{
       {result.name}}{
       {index}}</li>
             </ul>
      </div>
    </template>
    <script>
      export default {
        data(){
          return {
              list: [
                {name:'最新HOME'}
              ]
          }
        }
      }
    </script>

1-2 routers/news/index.vue

<template>
      <div>
           新闻页面信息：<br/>
            <router-link class="rlink" :class="{active:selected == 1}" @cllick.native="tabck(1)">最新新闻</router-link>
            <router-link class="rlink" :class="{active:selected == 2}" @cllick.native="tabck(2)">国际新闻</router-link>
            <router-link class="rlink" :class="{active:selected == 3}" @cllick.native="tabck(3)">国内新闻</router-link>
        
        <router-view/>
      </div>
    </template>
    <script>
      export default {
        data () {
          return {
              selected: 1
          }
        },
        methods: {
          tabck(index){
            this.selected = index; //切换tab，设置选中项
          }
        } 
      }
    </script>

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

gj.vue：
    
    <template>
      <div>
            国际新闻信息：<br/>
             <ul >
                 <li v-for="(result, index) in list" :key="index">{
       {result.name}}{
       {index}}</li>
             </ul>
      </div>
    </template>
    <script>
      export default {
        data(){
          return {
              list: [
                {name:'国际新闻信息'},
                {name:'国际新闻信息'},
                {name:'国际新闻信息'},
                {name:'国际新闻信息'},
                {name:'国际新闻信息'}
              ]
          }
        }
      }
    </script>
    
    gn.vue：
    
    <template>
      <div>
            国内新闻信息：<br/>
             <ul >
                 <li v-for="(result, index) in list" :key="index">{
       {result.name}}{
       {index}}</li>
             </ul>
      </div>
    </template>
    <script>
      export default {
        data(){
          return {
              list: [
                {name:'国内新闻信息'},
                {name:'国内新闻信息'}
              ]
          }
        }
      }
    </script>
    
    zx.vue：
    
    <template>
      <div>
            最新新闻信息：<br/>
             <ul >
                 <li v-for="(result, index) in list" :key="index">{
       {result.name}}{
       {index}}</li>
             </ul>
      </div>
    </template>
    <script>
      export default {
        data(){
          return {
              list: [
                {name:'最新新闻信息'},
                {name:'最新新闻信息'}
              ]
          }
        }
      }
    </script>

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

<template>
      <div>
            娱乐页面信息：<br/>
            <router-link class="rlink" :class="{active:selected == 1}" @click.native="tabck(1)">最新娱乐</router-link>
            <router-link class="rlink" :class="{active:selected == 2}" @click.native="tabck(2)">明星娱乐</router-link>
            <router-link class="rlink" :class="{active:selected == 3}" @click.native="tabck(3)">焦点娱乐</router-link>
          
            
            <router-view/>
      </div>
      <script>
        export default {
          data(){
            return {
              selected: 1
            }
          },
          methods: {
            tabck(index){
              this.selected = index; //设置tab选中项
            }
          }
        }
      </script>
    </template>

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

jd.vue：
    <template>
      <div>
            焦点娱乐信息：<br/>
             <ul >
                 <li v-for="(result, index) in list" :key="index">{
       {result.name}}{
       {index}}</li>
             </ul>
      </div>
    </template>
    <script>
      export default {
        data(){
          return {
              list: [
                {name:'焦点娱乐信息'},
                {name:'焦点娱乐信息'}
              ]
          }
        }
      }
    </script>
    
    mx.vue：
    
    <template>
      <div>
            明星娱乐信息：<br/>
             <ul >
                 <li v-for="(result, index) in list" :key="index">{
       {result.name}}{
       {index}}</li>
             </ul>
      </div>
    </template>
    <script>
      export default {
        data(){
          return {
              list: [
                {name:'明星娱乐信息'},
                {name:'明星娱乐信息'}
              ]
          }
        }
      }
    </script>
    
    zx.vue：
    
    <template>
      <div>
            最新娱乐信息：<br/>
             <ul >
                 <li v-for="(result, index) in list" :key="index">{
       {result.name}}{
       {index}}</li>
             </ul>
      </div>
    </template>
    <script>
      export default {
        data(){
          return {
              list: [
                {name:'最新娱乐信息'},
                {name:'最新娱乐信息'}
              ]
          }
        }
      }
    </script>

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

....
      省略导入路由、使用路由代码...
    ....
    // 嵌套路由的使用：第一层
    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'
    
    // 路由规则配置：
    export default new Router({
      routes : [
        {
          name: 'rindex',
          path: '/routers',
          component: Rindex,
          redirect: {name: 'rindex_rhome'}, // 跳转到下一级第一个
          children: [
             {
                 name: 'rindex_rhome',
                 path: 'rindex_rhome', //如果这里不使用 "/rhome" 则表示是归属于上级路由（上级luyou/子path），如果使用 "/rhome" 则表示根路径下访问
                 component: Rhome,
                 redirect: {name: 'rindex_rhome_Rhomezx'}, //跳转到下级第一层
                 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
                    }
                ]
            }
          ]
        }
      ]
    });

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

### 关于Fundebug ###

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

[![2018121912254161][]][2018121912254161]

[Fundebug]: https://www.fundebug.com/
[http_IP]: https://link.jianshu.com?t=http%3A%2F%2FIP
[Image 1]: 
[Link 1]: https://www.baidu.com/s?wd=%E9%87%91%E5%B1%B1%E8%BD%AF%E4%BB%B6&tn=24004469_oem_dg&rsv_dl=gh_pl_sl_csd
[Link 2]: https://www.baidu.com/s?wd=%E7%99%BE%E5%A7%93%E7%BD%91&tn=24004469_oem_dg&rsv_dl=gh_pl_sl_csd
[2018121912254161]: /images/20220331/b7b8b6e8803049b8ad5f0e7ad2484509.png