Vue三层嵌套路由的示例代码


            Vue嵌套路由：



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

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





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



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

        }

      ]

    }

   ]

  }

 ]

});



以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持中文源码网。