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

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

Javascript 相关文章推荐
来自qq的javascript面试题
Jul 24 Javascript
JSON序列化与解析原生JS方法且IE6和chrome测试通过
Sep 05 Javascript
简单介绍jsonp 使用小结
Jan 27 Javascript
JavaScript实现移动端滑动选择日期功能
Jun 21 Javascript
避免jQuery名字冲突 noConflict()方法
Jul 30 Javascript
js仿手机页面文件下拉刷新效果
Oct 14 Javascript
微信小程序 图片边框解决方法
Jan 16 Javascript
javascript 中模板方法单例的实现方法
Oct 17 Javascript
vue实现前进刷新后退不刷新效果
Jan 26 Javascript
js 使用ajax设置和获取自定义header信息的方法小结
Mar 12 Javascript
js面试题之异步问题的深入理解
Sep 20 Javascript
vue2的 router在使用过程中遇到的一些问题
Apr 13 Vue.js
动态加载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
You might like
ThinkPHP模板Switch标签用法示例
2014/06/30 PHP
PHP中单引号与双引号的区别分析
2014/08/19 PHP
Laravel 5 框架入门(二)构建 Pages 的管理功能
2015/04/09 PHP
PHP使用PHPexcel导入导出数据的方法
2015/11/14 PHP
PHP序列化的四种实现方法与横向对比
2018/11/29 PHP
Laravel5.1 框架响应基本用法实例分析
2020/01/04 PHP
Laravel 手动开关 Eloquent 修改器的操作方法
2019/12/30 PHP
用js计算页面执行时间的函数
2006/12/07 Javascript
js 实现无缝滚动 兼容IE和FF
2009/07/15 Javascript
jQuery技巧大放送 学习jquery的朋友可以看下
2009/10/14 Javascript
JavaScript prototype属性使用说明
2010/05/13 Javascript
jQuery创建自定义的选择器用以选择高度大于100的超链接实例
2015/03/18 Javascript
AngularJS 依赖注入详解及示例代码
2016/08/17 Javascript
JS 组件系列之BootstrapTable的treegrid功能
2017/06/16 Javascript
jQuery扇形定时器插件pietimer使用方法详解
2017/07/18 jQuery
nodejs爬虫初试superagent和cheerio
2018/03/05 NodeJs
解决layer弹层遮罩挡住窗体的问题
2018/08/17 Javascript
js核心基础之闭包的应用实例分析
2019/05/11 Javascript
微信小程序开发注意指南和优化实践(小结)
2019/06/21 Javascript
JS校验与最终登陆界面功能完整示例
2020/01/13 Javascript
vue 修改 data 数据问题并实时显示操作
2020/09/07 Javascript
微信小程序实现滚动Tab选项卡
2020/11/16 Javascript
Vue +WebSocket + WaveSurferJS 实现H5聊天对话交互的实例
2020/11/18 Vue.js
[01:37]全新的一集《真视界》——TI7总决赛
2017/09/21 DOTA
[34:47]完美世界DOTA2联赛PWL S2 Magma vs LBZS 第一场 11.18
2020/11/18 DOTA
python中反射用法实例
2015/03/27 Python
基于django ManyToMany 使用的注意事项详解
2019/08/09 Python
Tensorflow 1.0之后模型文件、权重数值的读取方式
2020/02/12 Python
Matplotlib 折线图plot()所有用法详解
2020/07/28 Python
如何一键升级Python所有包
2020/11/05 Python
出纳岗位职责范本
2013/12/01 职场文书
祖国在我心中演讲稿200字
2014/08/28 职场文书
清洁工个人工作总结
2015/03/05 职场文书
党员转正党支部意见
2015/06/02 职场文书
首席执行官观后感
2015/06/03 职场文书
你会写请假条吗?
2019/06/26 职场文书