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 string 扩展库代码
Apr 09 Javascript
基于jquery+thickbox仿校内登录注册框
Jun 07 Javascript
3款实用的在线JS代码工具(国外)
Mar 15 Javascript
html a标签-超链接中confirm方法使用介绍
Jan 04 Javascript
jquery $.each 和for怎么跳出循环终止本次循环
Sep 27 Javascript
JS实现判断滚动条滚到页面底部并执行事件的方法
Dec 18 Javascript
不同编码的页面表单数据乱码问题解决方法
Feb 15 Javascript
jQuery选择id属性带有点符号元素的方法
Mar 17 Javascript
javascript中的Base64、UTF8编码与解码详解
Mar 18 Javascript
js实现网站最上边可关闭的浮动广告条代码
Sep 04 Javascript
jQuery Ajax和getJSON获取后台普通json数据和层级json数据用法分析
Jun 08 Javascript
js实现贪吃蛇小游戏
Oct 29 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
smarty section简介与用法分析
2008/10/03 PHP
在Laravel框架里实现发送邮件实例(邮箱验证)
2016/05/20 PHP
彪哥1.1(智能表格)提供下载
2006/09/07 Javascript
两个listbox实现选项的添加删除和搜索
2013/03/01 Javascript
jquery中获取id值方法小结
2013/09/22 Javascript
浅析JQuery UI Dialog的样式设置问题
2013/12/18 Javascript
JS实现可展开折叠层的鼠标拖曳效果
2015/10/09 Javascript
html5+javascript实现简单上传的注意细节
2016/04/18 Javascript
使用JavaScript实现ajax的实例代码
2016/05/11 Javascript
jQuery制作网页版选项卡
2016/07/28 Javascript
js实现复选框的全选和取消全选效果
2017/01/03 Javascript
详解jQuery事件
2017/01/13 Javascript
js oncontextmenu事件使用详解
2017/03/25 Javascript
angularJs在多个控制器中共享服务数据的方法
2018/09/30 Javascript
nodejs遍历文件夹下并操作HTML/CSS/JS/PNG/JPG的方法
2018/11/01 NodeJs
js canvas实现橡皮擦效果
2018/12/20 Javascript
如何用RxJS实现Redux Form
2018/12/29 Javascript
ES6中异步对象Promise用法详解
2019/07/31 Javascript
layer.open组件获取弹出层页面变量、函数的实例
2019/09/25 Javascript
java遇到微信小程序 &quot;支付验证签名失败&quot; 问题解决
2019/12/22 Javascript
javascript用defineProperty实现简单的双向绑定方法
2020/04/03 Javascript
如何在postman测试用例中实现断言过程解析
2020/07/09 Javascript
[49:13]DOTA2上海特级锦标赛C组资格赛#1 OG VS LGD第一局
2016/02/27 DOTA
详解Python验证码识别
2016/01/25 Python
Python 基础知识之字符串处理
2017/01/06 Python
用CSS3实现瀑布流布局的示例代码
2017/11/10 HTML / CSS
L’urv官网:精品女性运动服品牌
2019/07/07 全球购物
MIRTA官网:手工包,100%意大利制造
2020/02/11 全球购物
演讲稿的格式及范文
2014/08/22 职场文书
运动会口号霸气押韵
2015/12/24 职场文书
2019职场实习报告该怎么写?
2019/07/01 职场文书
python 中的@运算符使用
2021/05/26 Python
pytorch DataLoader的num_workers参数与设置大小详解
2021/05/28 Python
redis cluster支持pipeline的实现思路
2021/06/23 Redis
Nginx利用Logrotate实现日志分割
2022/05/20 Servers
Nginx使用ngx_http_upstream_module实现负载均衡功能示例
2022/08/05 Servers