Beispielcode zur Implementierung der Menüberechtigungssteuerung in Vue

// router.js Pseudocode const Login = r => require.ensure([],()=>r(require('../page/login/Login.vue')),'login');
const Home = r => erfordern.sicherstellen([],()=>r(erfordern('../page/Home.vue')),'home');
const Verboten = r => require.ensure([],()=>r(require('../page/403.vue')),'verboten');
const NotFound = r => require.ensure([],()=>r(require('../page/404.vue')),'nicht gefunden');
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 Routen = [
  {
    Weg: '/',
    Umleitung: '/login'
  },{
    Pfad: '/login',
    Komponente: Login
  },{
    Pfad: '/404',
    Komponente: Nicht gefunden
  },{
    Pfad: '/home',
    Komponente: Home,
    Umleitung: '/home/splashScreen',
    Kinder: [
      {
        Pfad: '/home/splashScreen',
        Komponente: SplashScreen,
        Meta: {
          Titel: ‚Nationaldienst Li Bai‘
      },{
        Pfad: '/home/addSplashScreen',
        Komponente: AddSplashScreen,
        Meta: {
          Titel: Nationaldienst Lu Bu'
        }
      }
    ]
  }
];

// Seitenleiste.vue
<Vorlage>
  <div Klasse="Seitenleiste">
    <el-Menü>
      ...
    </el-Menü>
  </div>
</Vorlage>
<Skript>
  Standard exportieren {
    Daten() {
      zurückkehren {
        Routen: [
          {
           Index: '1',
           Titel: 'Wehrdienst-Dschungel',
           Symbol: „Iconfont-Symbol-Guanggao“,
           Kinder: [
            {
             Index: 'SplashScreen',
             Titel: 'Li Bai',
             Kinder: []
            }, 
           ]
          },
          {  
            Index: '2', 
            Titel: 'Wehrdienst-Mittelfeldspieler', 
            Symbol: „Symbolschriftart-Symbol-tuisongguanli-“,
          }
        ]
      }
    },
    Methoden: {
      getLevel(){
        const level = sessionStorage.getItem('level');
        wenn(Ebene === '0'){
          this.routes.forEach(Funktion(Wert){
            if(value.title == "National Service Single"){
              Wert.versteckt = wahr;
              Wert.Kinder.fürJedes(Funktion(Wert){
                if(Wert.Titel=="Guan Yu"){
                  Wert.versteckt = wahr;
                }
              })
            }
          })
        }sonst wenn(Ebene === '1'){
          this.routes.forEach(Funktion(Wert){
            Wert.versteckt = wahr
            Wert.Kinder.fürJedes(Funktion(Wert){
              Wert.versteckt = wahr;
            })
          })
        }
      }
    },
    erstellt(){
      dies.getLevel();
    }
  }
</Skript>

// components.js alle Seitenressourcen 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');

Standard exportieren {
  heim,
  Begrüßungsbildschirm,
  addSplashScreen,
  SplashScreen bearbeiten,
  
};

// router.js Sehen Sie, ist es nicht erfrischend, einfach allgemeine Seiten zu schreiben? importiere Vue von 'vue';
Router von „vue-router“ importieren;

Vue.use(Router);

const Login = () => import('../page/login/Login.vue');
const Home = () => import('../page/Home.vue');
const Verboten = () => import('../page/403.vue');
const Dashboard = () => import('../page/dashboard/Dashboard.vue');
const Routen = [
  {
    Weg: '/',
    Umleitung: '/login'
  },{
    Pfad: '/login',
    Komponente: Login
  },{
    Pfad: '/403',
    Komponente: Verboten
  },
  {
    Pfad: '/dashboard',
    Komponente: Dashboard,
  },
];
exportiere standardmäßig einen neuen Router({
  Modus: "Verlauf",
  Routen: Routen,
  Basis: __dirname,
  linkActiveClass: "Link aktiv"
  
})

// der Pseudocode von main.js behält nur die spezifische zugehörige Logik bei. importiere routeMap von './router/component.js';
const NotFound = () => import('./page/404.vue');
const formatRouten = Funktion (Routen, Routendaten) {
  wenn (!routeData) {
    routeData = {
      Name: 'Heimat',
      Pfad: '/home',
      // Nur wenn die Komponente erfolgreich übereinstimmt, können Sie auf die spezifische Seitenkomponente zugreifen: routeMap['home'],
      Kinder: [],
    };
  }
  Routen.Länge und Routen.fürJedes(Route => {
    wenn(route.komponente) {
      route.komponente = routeMap[route.komponente];
      routeData.children.push({
        Pfad: Route.Pfad,
        Name: route.index,
        Komponente: Route.Komponente,
        Meta: {
          Titel: Route.Titel,
        },
      })
    }
    wenn (route.Kinder && route.Kinder.Länge) {
      formatRouten(route.children, routeData);
    }
  });
  Routendaten zurückgeben;
};

let isFetchRemote = true;

//Verwenden Sie die Hook-Funktion, um die Route umzuleiten router.beforeEach((to, from, next) => {
  const Benutzername = sessionStorage.getItem('Benutzername');
  if(!Benutzername && to.path !== '/login'){
    weiter({Pfad: '/login'});
  }
  sonst wenn (isFetchRemote && to.path !== '/login') {
    ajaxPost('/resourceAPI/getMenuData').then(res =>{
      wenn (res.status === 200 und res.data.errno === 0) {
        isFetchRemote = falsch;
        const menuData = res.data.result;
        localStorage.setItem('menudata', JSON.stringify(menuData));
        const routeData = formatRouten(menuData);
        resourceApp.$router.addRoutes([routeData].concat([
          {name:'404',pfad:'/404',komponente:Nicht gefunden},
          {Pfad:'*',Umleitung:'/404'}]));
        resourceApp.$router.push({
          Pfad: zu.Pfad,
          Abfrage: an.Abfrage
        });
      }
      anders {
        isFetchRemote = wahr;
      }
      nächste();
    })
    .catch(err => {
      console.log(fehler);
    });  
  }
  anders {
    nächste();
  }
});


const resourceApp = neue Vue({
  Router,
  rendern: h => h(App)
}).$mount('#app');

//menuData-Anforderungsdaten// Der Unterschied zwischen dem Menü der ersten Ebene und dem Menü der zweiten Ebene besteht darin, dass das Menü der ersten Ebene den Wert einer Komponente hat. Beispielsweise hat das folgende SMS-Management nur das Menü der ersten Ebene {
  "errno": 0, 
  "errmsg": "Berechtigungen erfolgreich erhalten", 
  "Ergebnis": [
    {
      "index": "1", 
      "title": "Dschungelposition", 
      "Symbol": "Symbolschriftart Symbol-Guanggao", 
      "Kinder": [
        {
          "index": "Begrüßungsbildschirm", 
          "Symbol": "", 
          "Titel": "Nakorulu", 
          "Pfad": "/home/splashAdverse", 
          "Komponente": "splashAdverse", 
          "isShow": wahr
        }, 
        {
          "index": "SplashScreen hinzufügen", 
          "Symbol": "", 
          "Titel": "Li Bai", 
          "Pfad": "/home/addAdverse", 
          "Komponente": "addAdverse", 
          "isShow": falsch
        }, 
        
      ]
    }, 
    {
      "index": "Nachricht", 
      "Titel": "Ehrenorden des Wehrdienstes", 
      "Symbol": "Symbolschriftart-duanxinguanli", 
      "Pfad": "/home/Nachricht", 
      "Komponente": "Nachricht", 
      "Kinder": [
        {
          "index": "Nachricht hinzufügen", 
          "Titel": "Das beste Guan Yu in China", 
          "Symbol": "", 
          "Pfad": "/home/addMessage", 
          "Komponente": "Nachricht hinzufügen", 
          "isShow": falsch
        }
        
      ]
    } 
  ]
}

// Dashboard-Pseudocode <Vorlage>
  <div Klasse="Navigationsliste">
    <div Klasse="nav_list_item" v-for="Element in navList" @click="goPage(Element)">
      <i: class="item.icon"></i>
      <h2>{{item.title}}</h2>
    </div>
  </div>            
</Vorlage>

<Skript> 
  erstellt(){
    const routeArr = JSON.parse(localStorage.getItem('menudata'));
    diese.navList = routeArr;
  }, 
  Methoden: {
    geheSeite(Element){
      // Nur einstufiges Menü if (item.component) {
        dies.$router.push(item.path);
      }anders{
        // Die Datenstruktur des sekundären Menüs hat nur Pfade in untergeordneten
        dies.$router.push(item.children[0]['Pfad']);
      }
    }
  }
</Skript>

// Seitenleisten-Pseudocode <script>
  Standard exportieren {
    Daten() {
      zurückkehren {
        Routen: [],
      }
    },
    Methoden: {
      Türsteher(arr){
        return arr.filter(Funktion(Wert){
         Rückgabe !(!val || val === "");
        });
      }
    },
    erstellt(){
      const menuData = JSON.parse(localStorage.getItem('menudata'));
      // Ordnen Sie das gesamte Routing-Array dem Pfad des aktuellen Routers zu. let routes = menuData.map((item)=>{

        // Nur eine Routing-Ebene if (item.component && item.path == this.$route.path) {
          console.log(Element)
          Artikel zurückgeben;
        }anders{
          wenn(item.children[0]['path'] == this.$route.path){
            console.log(Element)
            Artikel zurückgeben;
          }
        }
      })
      // Undefinierte, null und andere leere und falsche Werte im Array entfernen this.routes = this.bouncer(routes);
    }
  }
</Skript>