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读写json示例
Apr 11 Javascript
JSON取值前判断
Dec 23 Javascript
jQuery检查事件是否触发的方法
Jun 26 Javascript
js实现跨域的多种方法
Dec 25 Javascript
seajs中最常用的7个功能、配置示例
Oct 10 Javascript
jQuery实现页码跳转式动态数据分页
Dec 31 jQuery
php中and 和 &amp;&amp;出坑指南
Jul 13 Javascript
JS与jQuery判断文本框还剩多少字符可以输入的方法
Sep 01 jQuery
vue elementui form表单验证的实现
Nov 11 Javascript
图文讲解vue的v-if使用方法
Feb 11 Javascript
使用VUE实现在table中文字信息超过5个隐藏鼠标移到时弹窗显示全部
Sep 16 Javascript
微信小程序仿抖音短视频切换效果的实例代码
Jun 24 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
咖啡知识 咖啡养豆要养多久 排气又是什么
2021/03/06 新手入门
php产生随机数的两种方法实例代码 输出随机IP
2011/04/08 PHP
PHP 清空varnish 缓存的详解(包括指定站点下的)
2013/06/20 PHP
php网页标题中文乱码的有效解决方法
2014/03/05 PHP
利用php抓取蜘蛛爬虫痕迹的示例代码
2016/09/30 PHP
jQuery 1.0.4 - New Wave Javascript(js源文件)
2007/01/15 Javascript
用jscript实现新建和保存一个word文档
2007/06/15 Javascript
jQuery 选择器理解
2010/03/16 Javascript
为原生js Array增加each方法
2012/04/07 Javascript
动态加载js和css(外部文件)
2013/04/17 Javascript
jquery得到font-size属性值实现代码
2013/09/30 Javascript
原生JavaScript实现连连看游戏(附源码)
2013/11/05 Javascript
Extjs4实现两个GridPanel之间数据拖拽功能具体方法
2013/11/21 Javascript
js的回调函数详解
2015/01/05 Javascript
Windows下用PyCharm和Visual Studio开始Python编程
2015/10/26 Javascript
JavaScript模拟数组合并concat
2016/03/06 Javascript
详解js界面跳转与值传递
2016/11/22 Javascript
微信小程序 中wx.chooseAddress(OBJECT)实例详解
2017/03/31 Javascript
JavaScript实现简单的星星评分效果
2017/05/18 Javascript
基于Vue实例对象的数据选项
2017/08/09 Javascript
[03:32]2014DOTA2西雅图邀请赛 CIS外卡赛赛前black专访
2014/07/09 DOTA
[01:05:29]DOTA2-DPC中国联赛 正赛 PSG.LGD vs Aster BO3 第二场 1月24日
2021/03/11 DOTA
python模拟enum枚举类型的方法小结
2015/04/30 Python
玩转python爬虫之正则表达式
2016/02/17 Python
Python实现线程状态监测简单示例
2018/03/28 Python
python构建基础的爬虫教学
2018/12/23 Python
Python绘制并保存指定大小图像的方法
2019/01/10 Python
pycharm 激活码及使用方式的详细教程
2020/05/12 Python
Python引入多个模块及包的概念过程解析
2020/09/21 Python
HTML5 Canvas 起步(1) - 基本概念
2009/05/12 HTML / CSS
保密工作目标责任书
2014/07/28 职场文书
个人债务授权委托书
2014/10/17 职场文书
教师个人考察材料
2014/12/16 职场文书
MySQL单表千万级数据处理的思路分享
2021/06/05 MySQL
vue elementUI表格控制对应列
2022/04/13 Vue.js
SQL中去除重复数据的几种方法汇总(窗口函数对数据去重)
2023/05/08 MySQL