当前位置：首页 > VUE

vue实现导航切换内容

2026-01-12 02:40:33VUE

Vue 实现导航切换内容

在 Vue 中实现导航切换内容可以通过动态组件、路由或条件渲染等方式完成。以下是几种常见方法：

动态组件结合 `v-if` 或 `v-show`

通过 v-if 或 v-show 控制不同内容的显示与隐藏，适合简单场景。

<template>
  <div>
    <button @click="currentTab = 'Home'">Home</button>
    <button @click="currentTab = 'About'">About</button>

    <div v-if="currentTab === 'Home'">
      <HomeComponent />
    </div>
    <div v-if="currentTab === 'About'">
      <AboutComponent />
    </div>
  </div>
</template>

<script>
import HomeComponent from './Home.vue';
import AboutComponent from './About.vue';

export default {
  data() {
    return {
      currentTab: 'Home'
    };
  },
  components: {
    HomeComponent,
    AboutComponent
  }
};
</script>

使用 Vue Router

通过 Vue Router 实现导航切换内容，适合多页面应用。

安装 Vue Router：
```
npm install vue-router
```

配置路由：

vue实现导航切换内容

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

const routes = [
  { path: '/', component: Home },
  { path: '/about', component: About }
];

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

export default router;

在 main.js 中引入路由：

import { createApp } from 'vue';
import App from './App.vue';
import router from './router';

const app = createApp(App);
app.use(router);
app.mount('#app');

在组件中使用 <router-view>：

<template>
  <div>
    <router-link to="/">Home</router-link>
    <router-link to="/about">About</router-link>
    <router-view></router-view>
  </div>
</template>

动态组件 `<component :is>`

通过动态组件切换内容，适合需要动态加载组件的场景。

vue实现导航切换内容

<template>
  <div>
    <button @click="currentComponent = 'Home'">Home</button>
    <button @click="currentComponent = 'About'">About</button>

    <component :is="currentComponent"></component>
  </div>
</template>

<script>
import Home from './Home.vue';
import About from './About.vue';

export default {
  data() {
    return {
      currentComponent: 'Home'
    };
  },
  components: {
    Home,
    About
  }
};
</script>

使用状态管理（Vuex/Pinia）

通过状态管理工具（如 Pinia）管理当前显示的组件或内容。

安装 Pinia：
```
npm install pinia
```

创建 Store：

import { defineStore } from 'pinia';

export const useTabStore = defineStore('tab', {
  state: () => ({
    currentTab: 'Home'
  }),
  actions: {
    setTab(tab) {
      this.currentTab = tab;
    }
  }
});

在组件中使用：

<template>
  <div>
    <button @click="store.setTab('Home')">Home</button>
    <button @click="store.setTab('About')">About</button>

    <component :is="store.currentTab"></component>
  </div>
</template>

<script>
import { useTabStore } from './stores/tab';
import Home from './Home.vue';
import About from './About.vue';

export default {
  components: { Home, About },
  setup() {
    const store = useTabStore();
    return { store };
  }
};
</script>