动态Tab导航

在 Vue 中，可以使用 Vue Router 和 动态显示组件 的方式实现类似的局部导航功能。以下是一个完整的案例代码：

案例功能

1. 底部的全局导航（“首页”、“商城”、“我的”）。
2. 在“我的”页面中，有局部的 Tab 切换导航（“作品”、“私密”、“推荐”、“收藏”、“喜欢”）。

代码实现

1. 安装和初始化 Vue Router

确保你已经安装了 Vue Router：

npm install vue-router

2. 项目结构

src/
├── App.vue
├── main.js
├── components/
│   ├── GlobalFooter.vue    // 底部全局导航
│   ├── Tabs.vue            // 局部导航（“我的”页面专用）
├── views/
│   ├── Home.vue            // 首页
│   ├── Shop.vue            // 商城
│   ├── Profile.vue         // 我的页面
│       ├── TabsContent/
│           ├── Works.vue   // “作品”子页面
│           ├── Private.vue // “私密”子页面
│           ├── Recommend.vue // “推荐”子页面
│           ├── Collect.vue // “收藏”子页面
│           ├── Like.vue    // “喜欢”子页面
├── router/
│   ├── index.js            // 路由配置

3. 代码实现

App.vue

<template>
  <div id="app">
    <router-view /> <!-- 动态加载页面 -->
    <GlobalFooter /> <!-- 全局底部导航 -->
  </div>
</template>

<script>
import GlobalFooter from './components/GlobalFooter.vue';
export default {
  components: {
    GlobalFooter,
  },
};
</script>

<style>
/* 全局样式 */
</style>

router/index.js

import { createRouter, createWebHistory } from 'vue-router';
import Home from '../views/Home.vue';
import Shop from '../views/Shop.vue';
import Profile from '../views/Profile.vue';

const routes = [
  { path: '/', name: 'Home', component: Home },
  { path: '/shop', name: 'Shop', component: Shop },
  { path: '/profile', name: 'Profile', component: Profile },
];

const router = createRouter({
  history: createWebHistory(),
  routes,
});

export default router;

GlobalFooter.vue

<template>
  <div class="footer">
    <router-link to="/">首页</router-link>
    <router-link to="/shop">商城</router-link>
    <router-link to="/profile">我的</router-link>
  </div>
</template>

<style scoped>
.footer {
  position: fixed;
  bottom: 0;
  width: 100%;
  background-color: #f5f5f5;
  display: flex;
  justify-content: space-around;
  padding: 10px 0;
  border-top: 1px solid #ccc;
}
</style>

Profile.vue（“我的”页面）

<template>
  <div>
    <Tabs @tab-change="handleTabChange" />
    <component :is="currentTab" /> <!-- 动态渲染子组件 -->
  </div>
</template>

<script>
import Tabs from '../components/Tabs.vue';
import Works from './TabsContent/Works.vue';
import Private from './TabsContent/Private.vue';
import Recommend from './TabsContent/Recommend.vue';
import Collect from './TabsContent/Collect.vue';
import Like from './TabsContent/Like.vue';

export default {
  components: {
    Tabs,
    Works,
    Private,
    Recommend,
    Collect,
    Like,
  },
  data() {
    return {
      currentTab: 'Works', // 默认显示“作品”
    };
  },
  methods: {
    handleTabChange(tab) {
      this.currentTab = tab;
    },
  },
};
</script>

Tabs.vue（局部导航栏）

<template>
  <div class="tabs">
    <button
      v-for="tab in tabs"
      :key="tab.value"
      :class="{ active: currentTab === tab.value }"
      @click="changeTab(tab.value)"
    >
      {{ tab.label }}
    </button>
  </div>
</template>

<script>
export default {
  props: {
    defaultTab: {
      type: String,
      default: 'Works',
    },
  },
  data() {
    return {
      tabs: [
        { label: '作品', value: 'Works' },
        { label: '私密', value: 'Private' },
        { label: '推荐', value: 'Recommend' },
        { label: '收藏', value: 'Collect' },
        { label: '喜欢', value: 'Like' },
      ],
      currentTab: this.defaultTab,
    };
  },
  methods: {
    changeTab(tab) {
      this.currentTab = tab;
      this.$emit('tab-change', tab); // 通知父组件切换 Tab
    },
  },
};
</script>

<style scoped>
.tabs {
  display: flex;
  justify-content: space-around;
  background-color: #f5f5f5;
  padding: 10px 0;
  border-bottom: 1px solid #ccc;
}

button {
  background: none;
  border: none;
  font-size: 16px;
  cursor: pointer;
}

button.active {
  font-weight: bold;
  color: #007bff;
}
</style>

子页面示例（Works.vue）

<template>
  <div>
    <h2>作品页面</h2>
    <p>这里是作品的内容。</p>
  </div>
</template>

其他子页面（Private.vue、Recommend.vue 等）可以按照类似结构实现。

样式优化

1. 固定顶部导航：在 Tabs.vue 添加 position: sticky 或者结合 z-index 实现悬浮效果。
2. 动态路由高亮：可以根据 Vue Router 的 route.name 来实现。

如果需要更高级的效果（例如动画切换），可以使用 Vue Transition 或第三方动画库（如 Animate.css）。