vue

2024-06-03 16:11| 来源: 网络整理| 查看: 265

需求： 1. 底部5个tab选项卡 2. 其中一个里面又有tab选项卡 3. 显示active状态 4. 底部选项卡和子路由的选项卡都默认选择第一个选项卡

举个栗子：这里写图片描述示例是随便写的。

1.路由文件 router/index.js

import Vue from 'vue' import Router from 'vue-router' import Home from '@/components/Home' import Brand from '@/components/Brand' import Cart from '@/components/Cart' import Member from '@/components/Member' import Me from '@/components/Me' import BrandA from '@/components/BrandA' import BrandB from '@/components/BrandB' Vue.use(Router) export default new Router({ routes: [ { path: '/', name: 'Home', component: Home }, { path: '/brand', component: Brand, redirect: '/brand/brand-a', children: [ { path: 'brand-a', name: 'BrandA', component: BrandA }, { path: 'brand-b', name: 'BrandB', component: BrandB } ] }, { path: '/cart', name: 'Cart', component: Cart }, { path: '/member', name: 'Member', component: Member }, { path: '/me', name: 'Me', component: Me } ] })

2.底部选项卡 Tabs.vue

Home Brand Cart Member Me export default { name: 'Tabs', data () { return { } } } .tabs { position: absolute; left: 0; bottom: 0; width: 100%; background: #fff; padding: 5px 0; } .tabs ul { display: table; width: 100%; } .tabs ul li { display: table-cell; font-size: 16px; } .router-link-active { color: #f06; }

3.Brand.vue 底部选项卡其中一个页面（里面含有子路由）

Brand import BrandTab from "./BrandTab.vue" export default { name: 'Brand', data () { return { } }, components: { BrandTab } }

4.BrandTab.vue（Brand里面含有子路由的Tab）

Brand-A Brand-B export default { name: 'BrandTab', data () { return { } } } .brand-tab ul { width: 100%; display: table; } .brand-tab ul li { display: table-cell; border-bottom: 2px solid #ccc; padding: 4px 0; } .router-link-active { color: red; border-bottom: 2px solid red !important; }

【本文地址】

公司简介

联系我们