vue实现左侧导航隐藏

Vue 实现左侧导航隐藏

使用 v-show 或 v-if 控制显示隐藏

在 Vue 中可以通过 v-show 或 v-if 指令控制左侧导航的显示隐藏。v-show 通过 CSS 的 display 属性切换，适合频繁切换的场景；v-if 会直接销毁和重建 DOM，适合不频繁切换的场景。

<template>
  <div>
    <button @click="toggleNav">切换导航</button>
    <div v-show="isNavVisible" class="left-nav">
      <!-- 导航内容 -->
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isNavVisible: true
    }
  },
  methods: {
    toggleNav() {
      this.isNavVisible = !this.isNavVisible
    }
  }
}
</script>

结合 CSS 过渡效果

为隐藏和显示过程添加过渡效果，提升用户体验。可以使用 Vue 的 <transition> 组件实现。

<template>
  <div>
    <button @click="toggleNav">切换导航</button>
    <transition name="slide">
      <div v-show="isNavVisible" class="left-nav">
        <!-- 导航内容 -->
      </div>
    </transition>
  </div>
</template>

<style>
.slide-enter-active, .slide-leave-active {
  transition: transform 0.3s ease;
}
.slide-enter, .slide-leave-to {
  transform: translateX(-100%);
}
.left-nav {
  width: 200px;
  background: #f5f5f5;
}
</style>

使用 Vuex 管理状态

在大型应用中，可以通过 Vuex 集中管理导航状态，方便多个组件共享和修改。

// store.js
export default new Vuex.Store({
  state: {
    isNavVisible: true
  },
  mutations: {
    toggleNav(state) {
      state.isNavVisible = !state.isNavVisible
    }
  }
})

<template>
  <div>
    <button @click="$store.commit('toggleNav')">切换导航</button>
    <div v-show="$store.state.isNavVisible" class="left-nav">
      <!-- 导航内容 -->
    </div>
  </div>
</template>

响应式隐藏

根据屏幕宽度自动隐藏导航，可以通过监听 resize 事件实现响应式隐藏。

export default {
  data() {
    return {
      isNavVisible: true
    }
  },
  mounted() {
    window.addEventListener('resize', this.handleResize)
    this.handleResize()
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.handleResize)
  },
  methods: {
    handleResize() {
      this.isNavVisible = window.innerWidth > 768
    }
  }
}

结合路由隐藏

某些路由下隐藏导航，可以通过路由守卫或 watch 监听路由变化实现。

export default {
  watch: {
    '$route'(to) {
      this.isNavVisible = !to.meta.hideNav
    }
  }
}

// router.js
{
  path: '/login',
  component: Login,
  meta: { hideNav: true }
}