大数据毕业设计之前端09：导航栏tab的滑动块如何实现

前言

上一篇主要讲了如何动态添加导航栏的tab，那么本篇将会写如何关闭tab、实现滑动块已经一些细节上的操作。

这是实现新增、关闭等功能后的tabs.vue，里面绑定的方法逻辑都是我基于BuildAdmin重构实现的，后面在讲滑动块的时候，可以回来看看图中html的代码。

首个tab

在第一次访问BuildAdmin或者刷新页面时，导航栏只有一个tab，这里选择是将 控制台 设置成了第一个tab。

getFirstRoute

所以我在router.ts中，实现了getFirstRoute() 来获取第一个route。

export const getFirstRoute = (routes: RouteRecordRaw[]): null | RouteLocationNormalized => {
   
    let route: any = null
    routes.forEach((item) => {
   
        if (item.meta?.menu_type == 'tab') {
   
            route = item