首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

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

Posted in Javascript onMay 05, 2018

Vue嵌套路由：

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

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

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

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

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

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
        }
      ]
    }
   ]
  }
 ]
});

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持三水点靠木。

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

- Author -

圆梦人生

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
javascript 节点排序 2
Jan 31 Javascript
showModalDialog模态对话框的使用详解以及浏览器兼容
Jan 11 Javascript
javascript实现网页子页面遍历回调的方法（涉及 window.frames、递归函数、函数上下文）
Jul 27 Javascript
js实现数组冒泡排序、快速排序原理
Mar 08 Javascript
深入理解JavaScript中的浮点数
May 18 Javascript
jQuery实现的电子时钟效果完整示例
Apr 28 jQuery
详解如何在微信小程序中愉快地使用sass
Jul 30 Javascript
vue 中Virtual Dom被创建的方法
Apr 15 Javascript
JS去除字符串最后的逗号实例分析【四种方法】
Jun 20 Javascript
jQuery pager.js 插件动态分页功能实例分析
Aug 02 jQuery
js实现金山打字通小游戏
Jul 24 Javascript
原生JS中应该禁止出现的写法
May 05 Javascript
动态加载JavaScript文件的3种方式
May 05 #Javascript
Node.js的Koa实现JWT用户认证方法
May 05 #Javascript
浅谈vue项目可以从哪些方面进行优化
May 05 #Javascript
Angular模版驱动表单的使用总结
May 05 #Javascript
浅谈Angular HttpClient简单入门
May 04 #Javascript
Vue项目全局配置微信分享思路详解
May 04 #Javascript
vue嵌套路由与404重定向实现方法分析
May 04 #Javascript
优先队列(1) element-ui(1) 三角函数(1) 模板引擎(1) 动态代理(1) 迪杰斯特拉(1) seata(1) Carbon(1) pongo2(1) Dijkstra(1)
You might like
计算一段日期内的周末天数的php代码（星期六，星期日总和）
2009/11/12 PHP
PHP中其实也可以用方法链
2011/11/10 PHP
php处理restful请求的路由类分享
2014/02/27 PHP
PHP数字和字符串ID互转函数（类似优酷ID）
2014/06/30 PHP
ThinkPHP文件缓存类代码分享
2015/04/22 PHP
Laravel路由研究之domain解决多域名问题的方法示例
2019/04/04 PHP
[对联广告] JS脚本类
2006/08/27 Javascript
一直复略了的一个问题，关于表单重复提交
2007/02/15 Javascript
jQuery 1.5 源码解读 面向中高阶JSER
2011/04/05 Javascript
jQuery中创建实例与原型继承揭秘
2011/12/21 Javascript
javascript实现日历控件(年月日关闭按钮)
2012/12/12 Javascript
jquery获取特定name所有选中的checkbox,支持IE9标准模式
2013/03/18 Javascript
JavaScript中的this关键字介绍与使用实例
2013/06/21 Javascript
JS下拉框内容左右移动效果的具体实现
2013/07/10 Javascript
使用js显示当前时间示例
2014/03/02 Javascript
javascript随机抽取0-100之间不重复的10个数
2016/02/25 Javascript
javascript 组合按键事件监听实现代码
2017/02/21 Javascript
关于页面刷新vuex数据消失问题解决方案
2017/07/03 Javascript
centos系统升级python 2.7.3
2014/07/03 Python
Python如何判断数独是否合法
2016/09/08 Python
Python判断某个用户对某个文件的权限
2016/10/13 Python
python数据分析数据标准化及离散化详解
2018/02/26 Python
Python 函数基础知识汇总
2018/03/09 Python
Python File readlines() 使用方法
2018/03/19 Python
关于Python3 类方法、静态方法新解
2019/08/30 Python
Python使用贪婪算法解决问题
2019/10/22 Python
爷爷追悼会答谢词
2014/01/24 职场文书
《骆驼和羊》教学反思
2014/02/27 职场文书
师范生见习报告
2014/10/31 职场文书
2014年科研工作总结
2014/12/03 职场文书
仓库管理员岗位职责
2015/02/03 职场文书
超市收银员岗位职责
2015/04/07 职场文书
2015年青年志愿者工作总结
2015/05/20 职场文书
被告代理词范文
2015/05/25 职场文书
体育委员竞选稿
2015/11/21 职场文书
小程序实现侧滑删除功能
2022/06/25 Javascript