博客
关于我
vue子路由跳转实现tab选项卡
阅读量:614 次
发布时间:2019-03-12

本文共 3089 字,大约阅读时间需要 10 分钟。

现在很多的后台管理系统都采用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>就是最终其他子页面要显示的地方

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、之后写好其他页面,就能实现这个效果了

效果图:

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

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

如有问题,请指出,接受批评。

个人微信公众号:

转载地址:http://cqwaz.baihongyu.com/

你可能感兴趣的文章
mabatis 中出现&lt; 以及&gt; 代表什么意思?
查看>>
Mac book pro打开docker出现The data couldn’t be read because it is missing
查看>>
MAC M1大数据0-1成神篇-25 hadoop高可用搭建
查看>>
mac mysql 进程_Mac平台下启动MySQL到完全终止MySQL----终端八步走
查看>>
Mac OS 12.0.1 如何安装柯美287打印机驱动,刷卡打印
查看>>
MangoDB4.0版本的安装与配置
查看>>
Manjaro 24.1 “Xahea” 发布!具有 KDE Plasma 6.1.5、GNOME 46 和最新的内核增强功能
查看>>
mapping文件目录生成修改
查看>>
MapReduce程序依赖的jar包
查看>>
mariadb multi-source replication(mariadb多主复制)
查看>>
MariaDB的简单使用
查看>>
MaterialForm对tab页进行隐藏
查看>>
Member var and Static var.
查看>>
memcached高速缓存学习笔记001---memcached介绍和安装以及基本使用
查看>>
memcached高速缓存学习笔记003---利用JAVA程序操作memcached crud操作
查看>>
Memcached:Node.js 高性能缓存解决方案
查看>>
memcache、redis原理对比
查看>>
memset初始化高维数组为-1/0
查看>>
Metasploit CGI网关接口渗透测试实战
查看>>
Metasploit Web服务器渗透测试实战
查看>>