vue3 未登录首页onMounted只进一次，再次登录不加载里面的函数

Question

我再index页面onMounte里面写了根据用户角色（本地缓存中）查拥有的权限菜单，访问首页未登录跳转到登录页，登录后再次进首页菜单不展示，刷新一下就出来了，求前端同学给解决方案，代码如下

![img](https://img-mid.csdnimg.cn/release/static/image/mid/ask/db20189897e846b683de526db3b021d7.png "#left")

报错如下

刷新再加载一下页面就好了

无痕模式进来也是好的，不知道是啥原因，有没有遇到同问题的前端同学

Answer 1

晚上好🌙🌙🌙
本答案参考ChatGPT-3.5

根据问题描述，似乎是由于刷新页面会重新加载组件，而组件内的数据是需要重新获取的，而未登录时无法获取数据导致页面空白。以下是几种可能解决该问题的方案：

1. 将onMounted改为onActivated

将Vue3组件的生命周期钩子从onMounted更改为onActivated，这样每次组件被激活时都能触发数据获取函数，而不仅仅是在初始化时获取。这应该可以解决您提到的问题。可以尝试以下代码：

<script>
import { reactive, onActivated } from 'vue';
import { mesMenu } from '@/api/menumanage';

export default {
  name: 'HomeSidebar',
  setup() {
    const state = reactive({
      menulist: [],
      sidebar_menu_chil: true,
    });

    const getMenuData = (item) => {
      mesMenu(item).then(res => {
        state.menulist = res.data;
      });
    };

    onActivated(() => {
      const userType = localStorage.getItem('userType');
      getMenuData(userType);
    });

    return {
      state,
    };
  },
};
</script>

1. 使用路由守卫

使用Vue路由守卫在页面路由切换时触发。在beforeEnter守卫中检查用户是否已经登录，如果没有则跳转到登录页面。这确保下次组件被访问时会触发onMounted生命周期。可以尝试以下代码：

<script>
import { reactive, onMounted } from 'vue';
import { mesMenu } from '@/api/menumanage';
import router from '@/router';

export default {
  name: 'HomeSidebar',
  setup() {
    const state = reactive({
      menulist: [],
      sidebar_menu_chil: true,
    });

    const getMenuData = (item) => {
      mesMenu(item).then(res => {
        state.menulist = res.data;
      });
    };

    onMounted(() => {
      const userType = localStorage.getItem('userType');
      getMenuData(userType);
    });

    router.beforeEach((to, from, next) => {
      const isLogged = localStorage.getItem('token');
      if (!isLogged && to.name !== 'login') {
        next({ name: 'login' });
      }
      next();
    });

    return { state };
  },
};
</script>

1. 在菜单组件中使用watch监听登录状态的变化

通过使用Vue3的watch监听登录状态的变化，当用户登录时可以重新获取数据并更新组件。可以尝试以下代码：

<script>
import { reactive, onMounted, watch } from 'vue';
import { mesMenu } from '@/api/menumanage';

export default {
  name: 'HomeSidebar',
  setup() {
    const state = reactive({
      menulist: [],
      sidebar_menu_chil: true,
    });

    const getMenuData = (item) => {
      mesMenu(item).then(res => {
        state.menulist = res.data;
      });
    };

    const userType = localStorage.getItem('userType');
    getMenuData(userType);

    watch(() => localStorage.getItem('token'), (newVal, oldVal) => {
      if (newVal !== oldVal) {
        getMenuData(localStorage.getItem('userType'));
      }
    });

    return { state };
  },
};
</script>

以上三种解决方案都可以解决您提出的问题，选择哪种方法取决于您的喜好和项目需求。