如何禁用Vue组件（div标签）？重渲染后组件恢复激活问题求助

问题根源拆解 #

1. 权限判断逻辑bug：当前beforeEach循环用户团队时，每次循环都会覆盖to.meta.showComponent的值，最终仅最后一个团队的判断结果生效，导致权限校验不准确。
2. 路由meta状态不可靠：直接修改路由配置的meta属性，组件重新渲染时可能因路由实例复用/重置，导致showComponent恢复初始值true。
3. 点击拦截不彻底：父div的@click.prevent无法完全阻止router-link的跳转行为（router-link的跳转逻辑绑定在自身生成的a标签上，事件触发优先级高于父元素）。

分步解决方案 #

1. 修复权限判断逻辑 #

调整beforeEach中的校验逻辑，确保只要用户有任意一个团队满足权限要求，就允许访问（若需求为所有团队必须拥有全部权限，可反向调整逻辑）：

const currentLogUser = store.getters["auth/currentUser"];
if (currentLogUser !== null && to?.meta?.componentAccessPermissions !== undefined) {
  let allowAccess = false;
  // 遍历团队，找到第一个满足权限的团队即停止
  for (const team of currentLogUser.teams) {
    const valPermissions = team.permissions
      .filter(item => to.meta.componentAccessPermissions.includes(item.permissionType))
      .map(item => item.permissionType);
    const teamHasAllPermissions = to.meta.componentAccessPermissions.every(i => valPermissions.includes(i));
    if (teamHasAllPermissions) {
      allowAccess = true;
      break;
    }
  }
  // 将权限结果存入Vuex，替代路由meta存储
  store.commit('auth/setComponentAccess', {
    routeName: to.name,
    allowAccess: allowAccess
  });
}

2. 用Vuex存储权限状态 #

在Vuex的auth模块中添加状态管理，确保权限状态在组件re-render时能稳定获取：

// store/modules/auth.js
const state = {
  componentAccess: {} // 存储格式：{ 路由名称: 是否允许访问 }
};

const mutations = {
  setComponentAccess(state, payload) {
    state.componentAccess[payload.routeName] = payload.allowAccess;
  }
};

const getters = {
  getComponentAccess: (state) => (routeName) => {
    return state.componentAccess[routeName] ?? true; // 默认允许访问
  }
};

export default {
  namespaced: true,
  state,
  mutations,
  getters
};

3. 组件端控制显示与拦截点击 #

修改Vue组件代码，使用Vuex状态判断权限，同时添加禁用样式和彻底的点击拦截：

<template>
  <!-- 有权限时显示可点击卡片 -->
  <div class="col-12 col-md-4" v-if="hasAccess">
    <router-link class="card" to="/administration">
      <div class="card-img-top">
        <i class="hi hi-people" />
      </div>
      <div class="card-body">
        <h5 class="card-title">Teams & Users</h5>
      </div>
    </router-link>
  </div>
  <!-- 无权限时显示禁用状态卡片（可选，替换v-if为v-show可保留占位） -->
  <div class="col-12 col-md-4 disabled-card" v-show="!hasAccess">
    <div class="card">
      <div class="card-img-top">
        <i class="hi hi-people" />
      </div>
      <div class="card-body">
        <h5 class="card-title">Teams & Users</h5>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  computed: {
    hasAccess() {
      return this.$store.getters['auth/getComponentAccess']('SettingsOverview');
    }
  }
};
</script>

<style scoped>
.disabled-card {
  opacity: 0.6;
  pointer-events: none; /* 彻底阻止所有点击事件 */
  cursor: not-allowed;
}
</style>

4. 拦截直接URL跳转 #

防止用户通过直接输入URL访问无权限页面，在beforeEach中添加路由拦截：

// 权限判断逻辑后添加
if (!allowAccess && to.name === 'SettingsOverview') {
  next('/unauthorized'); // 跳转到无权限提示页
  // 或 next(false); 直接阻止跳转
} else {
  next();
}

内容的提问来源于stack exchange，提问作者Mr. A