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 相关文章推荐
css图片自适应大小
Nov 28 Javascript
js 无提示关闭浏览器页面的代码
Mar 09 Javascript
js通过更改按钮的显示样式实现按钮的滑动效果
Apr 23 Javascript
TypeScript 中接口详解
Jun 19 Javascript
用JavaScript来美化HTML的select标签的下拉列表效果
Nov 17 Javascript
js实现文字闪烁特效的方法
Dec 17 Javascript
jQuery 选择符详细介绍及整理
Dec 02 Javascript
JS实现获取图片大小和预览的方法完整实例【兼容IE和其它浏览器】
Apr 24 Javascript
VueJS 取得 URL 参数值的方法
Jul 19 Javascript
JavaScript创建表格的方法
Apr 13 Javascript
详解关于Vue单元测试的几个坑
Apr 26 Javascript
通过vue刷新左侧菜单栏操作
Aug 06 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
You might like
PHP5在Apache下的两种模式的安装
2006/09/05 PHP
php一次性删除前台checkbox多选内容的方法
2013/09/22 PHP
Yii使用CLinkPager分页实例详解
2014/07/23 PHP
PHP脚本监控Nginx 502错误并自动重启php-fpm
2015/05/13 PHP
WordPress开发中短代码的实现及相关函数使用技巧
2016/01/05 PHP
WordPress中设置Post Type自定义文章类型的实例教程
2016/05/10 PHP
Yii Framework框架开发微信公众平台示例
2020/04/26 PHP
纯JS实现五子棋游戏兼容各浏览器(附源码)
2013/04/24 Javascript
JS中数组Array的用法示例介绍
2014/02/20 Javascript
跟我学Node.js(四)---Node.js的模块载入方式与机制
2014/06/04 Javascript
js实现圆盘记速表
2015/08/03 Javascript
layui中table表头样式修改方法
2018/08/15 Javascript
JS加密插件CryptoJS实现的Base64加密示例
2020/08/16 Javascript
详解Vue.js和layui日期控件冲突问题解决办法
2019/07/25 Javascript
解决layer.msg 不居中 ifram中的问题
2019/09/05 Javascript
JavaScript中的this基本问题实例小结
2020/03/09 Javascript
Python Web框架Flask中使用百度云存储BCS实例
2015/02/08 Python
python实现简单socket通信的方法
2016/04/19 Python
Python3 使用selenium插件爬取苏宁商家联系电话
2019/12/23 Python
python查找特定名称文件并按序号、文件名分行打印输出的方法
2020/04/24 Python
使用 css3 transform 属性来变换背景图的方法
2019/05/07 HTML / CSS
HTML5离线应用与客户端存储的实现
2018/05/03 HTML / CSS
加拿大高尔夫超市:Golf Town
2018/01/12 全球购物
Nordgreen英国官网:斯堪的纳维亚设计师手表
2018/10/24 全球购物
泰国最新活动和优惠:Megatix
2020/05/07 全球购物
专科文秘应届生求职信
2013/11/18 职场文书
养殖行业的创业计划书
2014/01/05 职场文书
研究生毕业鉴定
2014/01/29 职场文书
2015年南京大屠杀纪念日活动总结
2015/03/24 职场文书
因身体原因离职的辞职信范文
2015/05/12 职场文书
中学校园广播稿
2015/08/18 职场文书
聘任书格式及范文
2015/09/21 职场文书
python基础学习之递归函数知识总结
2021/05/26 Python
nginx服务器的下载安装与使用详解
2021/08/02 Servers
java代码实现空间切割
2022/01/18 Java/Android
彩虹社八名人气艺人全新周边限时推出,性转女装男装一次拥有!
2022/04/01 日漫