实现效果(路由三层嵌套，点击一级tab显示二级tab效果，二级tab点击切换对应内容,不在tab区域里的内容，切换时不重复渲染)：
Demo访问时路径：:端口/#/routers/
1.建立案例文件夹 page/routers/
1 routers/index.vue
<template> <div> <router-link :to="{name: 'rindex_rhome'}" :class="{active:selected == 1}" @click.native="tabck(1)">首页</router-link> <router-link :to="{name: 'rindex_rnews'}" @click.native="tabck(2)">新闻</router-link> <router-link :to="{name: 'rindex_ryl'}" @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="{active:selected == 1}" @click.native="tabck(1)">最新HOME</router-link> <router-link :to="{name: 'rindex_rhome_Rhomegj'}" :class="{active:selected == 2}" @click.native="tabck(2)">国际HOME</router-link> <router-link :to="{name: 'rindex_rhome_Rhomegn'}" :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="{active:selected == 1}" @cllick.native="tabck(1)">最新新闻</router-link> <router-link :class="{active:selected == 2}" @cllick.native="tabck(2)">国际新闻</router-link> <router-link :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：