Sample code for implementing menu permission control in Vue

// router.js pseudocode const Login = r => require.ensure([],()=>r(require('../page/login/Login.vue')),'login');
const Home = r => require.ensure([],()=>r(require('../page/Home.vue')),'home');
const Forbidden = r => require.ensure([],()=>r(require('../page/403.vue')),'forbidden');
const NotFound = r => require.ensure([],()=>r(require('../page/404.vue')),'notfound');
const Dashboard = r => require.ensure([],()=>r(require('../page/dashboard/Dashboard.vue')),'dashboard');
const SplashScreen = r => require.ensure([],()=>r(require('../page/splashScreen/SplashScreen.vue')),'splashScreen');
const AddSplashScreen = r => require.ensure([],()=>r(require('../page/splashScreen/AddSplashScreen.vue')),'addSplashScreen');

const routes = [
  {
    path: '/',
    redirect: '/login'
  },{
    path: '/login',
    component: Login
  },{
    path: '/404',
    component: NotFound
  },{
    path: '/home',
    component: Home,
    redirect: '/home/splashScreen',
    children: [
      {
        path: '/home/splashScreen',
        component: SplashScreen,
        meta: {
          title: 'National Service Li Bai}
      },{
        path: '/home/addSplashScreen',
        component: AddSplashScreen,
        meta: {
          title: National Service Lu Bu'
        }
      }
    ]
  }
];

// sidebar.vue
<template>
  <div class="sidebar">
    <el-menu>
      ...
    </el-menu>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        routes: [
          {
           index: '1',
           title: 'National Service Jungle',
           icon: 'iconfont icon-guanggao',
           children: [
            {
             index: 'splashScreen',
             title: 'Li Bai',
             children: []
            }, 
           ]
          },
          {  
            index: '2', 
            title: 'National Service Midfielder', 
            icon:'iconfont icon-tuisongguanli-',
          }
        ]
      }
    },
    methods: {
      getLevel(){
        const level = sessionStorage.getItem('level');
        if(level === '0'){
          this.routes.forEach(function(value){
            if(value.title == "National Service Single"){
              value.hidden = true;
              value.children.forEach(function(value){
                if(value.title=="Guan Yu"){
                  value.hidden = true;
                }
              })
            }
          })
        }else if(level === '1'){
          this.routes.forEach(function(value){
            value.hidden = true
            value.children.forEach(function(value){
              value.hidden = true;
            })
          })
        }
      }
    },
    created(){
      this.getLevel();
    }
  }
</script>

// components.js all page resources const home = () => import('../page/Home.vue');
const splashScreen = () => import('../page/splashScreen/SplashScreen.vue');
const addSplashScreen = () => import('../page/splashScreen/AddSplashScreen.vue');
const editSplashScreen = () => import('../page/splashScreen/EditSplashScreen.vue');

export default {
  home,
  splashScreen,
  addSplashScreen,
  editSplashScreen,
  
};

// router.js See, isn't it refreshing to just write common pages? import Vue from 'vue';
import Router from 'vue-router';

Vue.use(Router);

const Login = () => import('../page/login/Login.vue');
const Home = () => import('../page/Home.vue');
const Forbidden = () => import('../page/403.vue');
const Dashboard = () => import('../page/dashboard/Dashboard.vue');
const routes = [
  {
    path: '/',
    redirect: '/login'
  },{
    path: '/login',
    component: Login
  },{
    path: '/403',
    component: Forbidden
  },
  {
    path: '/dashboard',
    component: Dashboard,
  },
];
export default new Router({
  mode: 'history',
  routes: routes,
  base: __dirname,
  linkActiveClass: 'link-active'
  
})

// main.js pseudo code only retains specific related logic import routeMap from './router/component.js';
const NotFound = () => import('./page/404.vue');
const formatRoutes = function (routes, routeData) {
  if (!routeData) {
    routeData = {
      name: 'home',
      path: '/home',
      // Only when the component matches successfully can you access the specific page component: routeMap['home'],
      children: [],
    };
  }
  routes.length && routes.forEach(route => {
    if(route.component) {
      route.component = routeMap[route.component];
      routeData.children.push({
        path: route.path,
        name: route.index,
        component: route.component,
        meta: {
          title: route.title,
        },
      })
    }
    if (route.children && route.children.length) {
      formatRoutes(route.children, routeData);
    }
  });
  return routeData;
};

let isFetchRemote = true;

//Use the hook function to redirect the route router.beforeEach((to, from, next) => {
  const username = sessionStorage.getItem('username');
  if(!username && to.path !== '/login'){
    next({path: '/login'});
  }
  else if (isFetchRemote && to.path !== '/login') {
    ajaxPost('/resourceAPI/getMenuData').then(res =>{
      if (res.status === 200 && res.data.errno === 0) {
        isFetchRemote = false;
        const menuData = res.data.result;
        localStorage.setItem('menudata', JSON.stringify(menuData));
        const routeData = formatRoutes(menuData);
        resourceApp.$router.addRoutes([routeData].concat([
          {name:'404',path:'/404',component:NotFound},
          {path:'*',redirect:'/404'}]));
        resourceApp.$router.push({
          path: to.path,
          query: to.query
        });
      }
      else {
        isFetchRemote = true;
      }
      next();
    })
    .catch(err => {
      console.log(err);
    });  
  }
  else {
    next();
  }
});


const resourceApp = new Vue({
  router,
  render: h => h(App)
}).$mount('#app');

//menuData request data// The difference between the first-level menu and the second-level menu is that the first-level menu has the value of component. For example, the following SMS management only has the first-level menu {
  "errno": 0, 
  "errmsg": "Permissions obtained successfully", 
  "result": [
    {
      "index": "1", 
      "title": "Jungle Position", 
      "icon": "iconfont icon-guanggao", 
      "children": [
        {
          "index": "splashScreen", 
          "icon": "", 
          "title": "Nakorulu", 
          "path": "/home/splashAdverse", 
          "component": "splashAdverse", 
          "isShow": true
        }, 
        {
          "index": "addSplashScreen", 
          "icon": "", 
          "title": "Li Bai", 
          "path": "/home/addAdverse", 
          "component": "addAdverse", 
          "isShow": false
        }, 
        
      ]
    }, 
    {
      "index": "message", 
      "title": "National Service Top Order", 
      "icon": "iconfont icon-duanxinguanli", 
      "path": "/home/message", 
      "component": "message", 
      "children": [
        {
          "index": "addMessage", 
          "title": "The best Guan Yu in China", 
          "icon": "", 
          "path": "/home/addMessage", 
          "component": "addMessage", 
          "isShow": false
        }
        
      ]
    } 
  ]
}

// dashboard pseudocode <template>
  <div class="nav_list">
    <div class="nav_list_item" v-for="item in navList" @click="goPage(item)">
      <i :class="item.icon"></i>
      <h2>{{item.title}}</h2>
    </div>
  </div>            
</template>

<script> 
  created(){
    const routeArr = JSON.parse(localStorage.getItem('menudata'));
    this.navList = routeArr;
  }, 
  methods: {
    goPage(item){
      // Only one level menu if (item.component) {
        this.$router.push(item.path);
      }else{
        // The data structure of the secondary menu only has path in children
        this.$router.push(item.children[0]['path']);
      }
    }
  }
</script>

// sidebar pseudocode <script>
  export default {
    data() {
      return {
        routes: [],
      }
    },
    methods: {
      bouncer(arr){
        return arr.filter(function(val){
         return !(!val || val === "");
        });
      }
    },
    created(){
      const menuData = JSON.parse(localStorage.getItem('menudata'));
      // Map the entire routing array corresponding to the current router's path let routes = menuData.map((item)=>{

        // Only one level of routing if (item.component && item.path == this.$route.path) {
          console.log(item)
          return item;
        }else{
          if(item.children[0]['path'] == this.$route.path){
            console.log(item)
            return item;
          }
        }
      })
      // Remove undefined, null and other empty and false values ​​in the array this.routes = this.bouncer(routes);
    }
  }
</script>