现在很多的后台管理系统都采用tab选项卡的布局，左边是导航栏固定，右边是对应的页面，每次点击左边的导航标题，只有右面的对应页面再切换，而vue要做tab选项卡，推荐使用
在海北州等地区，都构建了全面的区域性战略布局，加强发展的系统性、市场前瞻性、产品创新能力，以专注、极致的服务理念，为客户提供成都网站设计、做网站 网站设计制作按需策划设计,公司网站建设,企业网站建设,高端网站设计,成都营销网站建设,外贸网站建设,海北州网站建设费用合理。
1、这是tab选项卡的页面，布局就不说了，主要是
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循环
{
"navData":[
{
"title":"子页一",
"url":"/"
},
{
"title":"子页二",
"url":"/PageTwo"
},
{
"title":"子页三",
"url":"/PageThree"
}
]
}4、之后写好其他页面，就能实现这个效果了
这是子页一，默认显示
效果图：
再追加一个上面所说的默认是登录页面，然后登录成功后显示首页的tab选项卡的效果图，因为没开数据库，我就模拟演示一下,手动登录成功进入主页：
好了，以上就完成了一个简单的tab选项卡布局，大家去试试吧。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持创新互联。
