vue子路由跳转实现tab选项卡


Posted in Javascript onJuly 24, 2019

现在很多的后台管理系统都采用tab选项卡的布局,左边是导航栏固定,右边是对应的页面,每次点击左边的导航标题,只有右面的对应页面再切换,而vue要做tab选项卡,推荐使用<router-link></router-link>实现a标签的效果,然后使用<router-view></router-view>实现插槽的效果,把对应的页面 "塞" 进去,具体实现看下面的案例:

1、这是tab选项卡的页面,布局就不说了,主要是<router-link :to="a.url" :key="index" v-for="(a,index) in Data">{{a.title}}</router-link>,其中to指向你要跳转的路径,这是关键,而<router-view></router-view>就是最终其他子页面要显示的地方

<template>
  <div class="index-box">
    <nav>
      <h1>导航</h1>
      <!-- 所有的导航标题,进行路由跳转指向 -->
      <router-link :to="a.url" :key="index" v-for="(a,index) in Data">{{a.title}}</router-link>
    </nav>
    <div class="content">
      <!-- 路由插槽:路由跳转的位置 -->
      <router-view></router-view>
    </div>
 
  </div>
</template>
 
<script>
  import navData from "../../static/data/nav"
  export default {
    name: "Index",
    data(){
      return {
        Data:[]
      }
    },
    methods:{
      init(){
        this.Data = navData.navData;
      }
    },
    created(){
      this.init();
    }
  }
</script>
 
<style scoped>
  /* 容器 */
  .index-box{
    width: 100%;
    height: 100%;
    background: #212224;
    display: flex;
  }
  /* 左侧导航条 */
  nav{
    width: 260px;
    height: 100%;
    background: #323437;
    overflow: hidden;
    float: left;
  }
  /* 导航 */
  nav h1{
    color: #f2ffff;
    margin: 10px 0 10px 10px;
  }
  /* 导航标题 */
  nav a{
    display: block;
    width: 100%;
    height: 45px;
    color: #f2ffff;
    background: #2e3033;
    padding-left: 10px;
    line-height: 45px;
    font-size: 20px;
    margin-bottom: 10px;
  }
  /* 右侧内容 */
  .content{
    flex: 1;
    padding: 20px;
  }
</style>

2、路由配置

这个案例中,默认显示的就是我tab选项卡的页面,所以其他子页面我就以这个页面配置的子路由

如果有其他需求,就再需要的地方配置子路由即可

import Vue from 'vue'
import Router from 'vue-router'
// 首页
import Tab from "../pages/Tab"
// 页面一
import PageOne from "../pages/PageOne"
// 页面二
import PageTwo from "../pages/PageTwo"
// 页面三
import PageThree from "../pages/PageThree"
 
Vue.use(Router);
 
export default new Router({
 routes: [
  {
    // 默认显示的页面
    path: '/',
    name: 'Tab',
    component: Tab,
    children:[
      {  
        // 子路由中默认显示的页面
        path: '',
        name: 'PageOne',
        component: PageOne
      },
      {
        path: 'PageTwo',
        name: 'PageTwo',
        component: PageTwo
      },
      {
        path: 'PageThree',
        name: 'PageThree',
        component: PageThree
      }
    ]
  }
 ]
})

这里再提供一种情况:比如我默认显示的是登录页面,登录进入后是首页,是tab选项卡的布局,所以我只要给首页配置子路由就可以了

import Vue from 'vue'
import Router from 'vue-router'
// import HelloWorld from '@/components/HelloWorld'
// 首页框架
import Index from "../pages/Index";
// 首页
import FunctionsIndex from "../components/Functions/FunctionsIndex";
// 数据源列表
import FunctionsDbSource from "../components/Functions/FunctionsDbSource"
// 角色管理
import FunctionsRoleManagement from "../components/Functions/FunctionsRoleManagement"
// 登录
import Login from "../pages/Login"
Vue.use(Router);
 
 
export default new Router({
 linkExactActiveClass: "act",
 mode: "history",
 routes: [
  {
   // 首页
   path: '/Index',
   name: 'Index',
   component: Index,
   children: [
    {
     // 首页中默认显示统计页面
     path: '',
     name: 'Total',
     component: FunctionsIndex
    },
    {
     path: 'DbSource',
     name: 'DbSource',
     component: FunctionsDbSource
    },
    {
     path: 'RoleManagement',
     name: 'RoleManagement',
     component: FunctionsRoleManagement
    }
   ]
  },
   // 默认显示登录页面
  {
   path: '/',
   name: 'Login',
   component: Login
  }
 ]
})

3、配置json文件

因为每个系统,侧边栏的导航标题都不一样,而且也不能保证后期不会再加,所以我推荐把导航标题提出来,到时候只要v-for循环<router-link>就可以了(循环具体操作返回上面看第一个代码块),然后在选项卡页面引入json,在vue方法中把它赋值给data中的变量,创建后调用方法即可,之后再增加导航标题,只需要在json中增加即可

{
 "navData":[
 {
  "title":"子页一",
  "url":"/"
 },
 {
  "title":"子页二",
  "url":"/PageTwo"
 },
 {
  "title":"子页三",
  "url":"/PageThree"
 }
 ]
}

4、之后写好其他页面,就能实现这个效果了

<template>
  <h1>这是子页一,默认显示</h1>
</template>
 
<script>
  export default {
    name: "PageOne"
  }
</script>
 
<style scoped>
  h1{
    color: #f2ffff;
  }
</style>

效果图:

vue子路由跳转实现tab选项卡

再追加一个上面所说的默认是登录页面,然后登录成功后显示首页的tab选项卡的效果图,因为没开数据库,我就模拟演示一下,手动登录成功进入主页:

vue子路由跳转实现tab选项卡

好了,以上就完成了一个简单的tab选项卡布局,大家去试试吧。

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

Javascript 相关文章推荐
Javascript 继承机制的实现
Aug 12 Javascript
JQuery对id中含有特殊字符的转义处理示例
Sep 06 Javascript
JS连接SQL数据库与ACCESS数据库的方法实例
Nov 21 Javascript
JavaScript中跨域调用Flash的方法
Aug 11 Javascript
javascript中Date对象的getDay方法使用指南
Dec 22 Javascript
微信小程序 获取设备信息 API实例详解
Oct 02 Javascript
vue的props实现子组件随父组件一起变化
Oct 27 Javascript
jQuery插件扩展实例【添加回调函数】
Nov 26 Javascript
JS学习笔记之原型链和利用原型实现继承详解
May 29 Javascript
Vue+Django项目部署详解
May 30 Javascript
vue轮播组件实现$children和$parent 附带好用的gif录制工具
Sep 26 Javascript
面试中canvas绘制图片模糊图片问题处理
Mar 13 Javascript
如何在Angular8.0下使用ngx-translate进行国际化配置
Jul 24 #Javascript
Vue.js路由实现选项卡简单实例
Jul 24 #Javascript
vue滚动tab跟随切换效果
Jun 29 #Javascript
Vue.js实现tab切换效果
Jul 24 #Javascript
javascript面向对象三大特征之多态实例详解
Jul 24 #Javascript
javascript面向对象三大特征之继承实例详解
Jul 24 #Javascript
Vue.js组件实现选项卡以及切换特效
Jul 24 #Javascript
You might like
PHP 文件扩展名 获取函数
2009/06/03 PHP
php后台多用户权限组思路与实现程序代码分享
2012/02/13 PHP
PHP中spl_autoload_register()和__autoload()区别分析
2014/05/10 PHP
php 广告点击统计代码(php+mysql)
2018/02/21 PHP
jquery清空textarea等输入框实现代码
2013/04/22 Javascript
jQuery的live()方法对hover事件的处理示例
2014/02/27 Javascript
Angularjs制作简单的路由功能demo
2015/04/14 Javascript
JavaScript中window.open用法实例详解
2015/04/15 Javascript
AngularJS表格详解及示例代码
2016/08/17 Javascript
Dropzone.js实现文件拖拽上传功能(附源码下载)
2016/11/22 Javascript
JavaScript 控制字体大小设置的方法
2016/11/23 Javascript
利用js给datalist或select动态添加option选项的方法
2018/01/25 Javascript
微信小程序表单验证form提交错误提示效果
2020/06/19 Javascript
详解Vue取消eslint语法限制
2018/08/04 Javascript
微信小程序利用Canvas绘制图片和竖排文字详解
2019/06/25 Javascript
小程序实现录音上传功能
2019/11/22 Javascript
[02:00]DOTA2英雄COSPLAY闹市街头巡游助威2015国际邀请赛
2015/08/02 DOTA
python实现基于两张图片生成圆角图标效果的方法
2015/03/26 Python
Python中表示字符串的三种方法
2017/09/06 Python
Python简单获取网卡名称及其IP地址的方法【基于psutil模块】
2018/05/24 Python
Random 在 Python 中的使用方法
2018/08/09 Python
python爬虫之urllib库常用方法用法总结大全
2018/11/14 Python
python下载微信公众号相关文章
2019/02/26 Python
检测python爬虫时是否代理ip伪装成功的方法
2019/07/12 Python
pycharm Tab键设置成4个空格的操作
2021/02/26 Python
马来西亚银饰品牌:JEOEL
2017/12/15 全球购物
飞利浦法国官网:Philips法国
2019/07/10 全球购物
Viking Direct爱尔兰:办公用品和家具
2019/11/21 全球购物
C和C++经典笔试题附答案解析
2014/08/18 面试题
弘扬雷锋精神活动演讲稿
2014/03/04 职场文书
网络工程专业大学生求职信
2014/10/01 职场文书
个人剖析材料及整改措施
2014/10/07 职场文书
医院护士工作检讨书
2014/10/26 职场文书
财产分割协议书范本
2014/11/03 职场文书
2015毕业生实习工作总结
2014/12/12 职场文书
公司员工手册范本
2015/05/14 职场文书