Vue改变页面跳转方法，轻松搞定导航栏tabbar隐藏

2022-12-22 00:27:06

在 Vue 应用中隐藏底部导航栏 Tabbar

在开发 Vue.js 应用时，经常会遇到需要在页面跳转时隐藏底部导航栏 Tabbar 的场景。这样做可以提升用户体验，减少视觉干扰。本文将介绍两种使用 Vue.js 隐藏 Tabbar 的方法，包括使用 Vue Router 的 beforeRouteEnter 钩子，以及使用 Vuex 管理 Tabbar 的显示和隐藏状态。

使用 Vue Router 的 beforeRouteEnter 钩子

Vue Router 的 beforeRouteEnter 钩子允许你在组件激活之前执行自定义逻辑。它非常适合在页面跳转时隐藏 Tabbar，因为可以在钩子中修改 DOM。

代码示例：

// 在路由配置中使用 beforeRouteEnter 钩子
{
  path: '/page',
  component: Page,
  beforeRouteEnter: (to, from, next) => {
    // 在进入页面之前，隐藏 Tabbar
    document.querySelector('.tabbar').style.display = 'none';
    next();
  },
  beforeRouteLeave: (to, from, next) => {
    // 在离开页面之前，显示 Tabbar
    document.querySelector('.tabbar').style.display = 'block';
    next();
  },
}

使用 Vuex 管理 Tabbar 状态

Vuex 是 Vue.js 中一个强大的状态管理库。它允许你在应用程序的不同组件之间共享和管理状态。你可以使用 Vuex 来管理 Tabbar 的显示和隐藏状态。

代码示例：

store.js

// 在 store 中定义 Tabbar 状态变量
const state = {
  tabbarVisible: true,
};

// 在 mutations 中定义修改 Tabbar 状态的函数
const mutations = {
  setTabbarVisible(state, visible) {
    state.tabbarVisible = visible;
  },
};

组件.vue

// 在组件中使用 computed 属性获取 Tabbar 状态
computed: {
  tabbarVisible() {
    return this.$store.state.tabbarVisible;
  },
},

// 在组件中使用 watch 监听 Tabbar 状态的变化
watch: {
  tabbarVisible(newValue) {
    if (newValue) {
      // 显示 Tabbar
      document.querySelector('.tabbar').style.display = 'block';
    } else {
      // 隐藏 Tabbar
      document.querySelector('.tabbar').style.display = 'none';
    }
  },
},