'How to hide menu while on pagehome page in vuejs?

I'm working on the code in vuejs... When I enter the interface, it takes me to the homepage page with the option to log in to admin or staff.. Now I want when I'm on pagehome and haven't selected either admin and staff the menu will be hidden. In mounted() of homepage.vue I have called dataFunc function in navigation/vertical/index.js and I pass url to dataFunc function and check if homepage path exists then give it 1 into a null data array. Now my problem is that the code is being processed asynchronously.. It hasn't processed the dataFunc function to get the data array then export default data runs. Please show me this part. Thank you

I have a page Homepage :

enter image description here

Code : pagehome.vue

<template>
  <b-col md="8" offset-md="2">
    <div class="hompage-card" style="margin-top: 150px;">
      <b-row>
        <b-col md="5" sm="6">
          <b-card
            class="icon-card cursor-pointer text-center mb-2 mx-50"
          >
            <div class="icon-wrapper">
              <b-avatar
                class="mb-1"
                :variant="`light-warning`"
                size="45"
              >
                <feather-icon
                  size="24"
                  icon="BookmarkIcon"
                />
              </b-avatar>
            </div>
            <b-card-text class="icon-name text-truncate mb-0 mt-1">
              <strong>Admin</strong>
            </b-card-text>
          </b-card>
        </b-col>

        <b-col md="5" sm="6">
          <b-card
            v-b-tooltip.hover.top="'Staff'"
            class="icon-card cursor-pointer text-center mb-2 mx-50"
          >
            <div class="icon-wrapper">
              <b-avatar
                class="mb-1"
                :variant="`light-warning`"
                size="45"
              >
                <feather-icon
                  size="24"
                  icon="HomeIcon"
                />
              </b-avatar>
            </div>
            <b-card-text class="icon-name text-truncate mb-0 mt-1">
              <strong>Staff</strong>
            </b-card-text>
          </b-card>
        </b-col>
      </b-row>
    </div>
  </b-col>
</template>



<script>
import { dataFunc } from "../../navigation/vertical/index";
export default {
 mounted() {
    let route = this.$route.path;
    dataFunc(route);
  },
},
</script>

In file navigation/vertical/index.js

import dashboard from './dashboard'
import tables from './tables'
import billing from './billing'

var data = [...dashboard, ...tables, ...billing]
function dataFunc(value) {
    let searchString = value.includes('homepage');
    if (searchString) {
        data = [];
    }
}
export { dataFunc };
export default data;

I would expect it to be like this:

enter image description here



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source