vue子路由跳转实现tab选项卡
现在很多的后台管理系统都采用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选项卡布局,大家去试试吧。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持创新互联。
新闻名称:vue子路由跳转实现tab选项卡
URL网址:http://scyanting.com/article/phocpd.html