18720358503 在线客服 人才招聘 返回顶部
企业动态 技术分享 行业动态

小程序如何注册_vue子路由跳转完成tab选项卡

2021-01-07分享 "> 对不起,没有下一图集了!">
vue子路由跳转实现tab选项卡       这篇文章主要为大家详细介绍了vue子路由跳转实现tab选项卡,完成一个简单的tab选项卡布局,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

现在很多的后台管理系统都采用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 
 nav 
 h1 导航 /h1 
 !-- 所有的导航标题,进行路由跳转指向 -- 
 router-link :to="a.url" :key="index" v-for="(a,index) in Data" {{a.title}} /router-link 
 /nav 
 div 
 !-- 路由插槽:路由跳转的位置 -- 
 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);

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 
 color: #f2ffff;
 /style 

效果图:

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

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持凡科。


"> 对不起,没有下一图集了!">
在线咨询