Comment implémenter le chargement paresseux des routes dans vue-router

Cet article présente principalement les informations pertinentes sur le chargement paresseux et le contrôle des autorisations du routage vue-router

Chargement paresseux et contrôle des autorisations du routage vue-router Aujourd'hui, je viens de faire une petite démo basée sur la vérification des jetons de nœud.

Ce qui suit est donc une introduction au chargement paresseux des itinéraires

1 Pourquoi devrions-nous utiliser le chargement paresseux des itinéraires ?

Lors de l'écriture d'un seul. -page application avec vue.js, Le package JavaScript emballé sera très volumineux, affectant le chargement des pages. Nous pouvons utiliser le chargement paresseux des routes pour optimiser ce problème. Lorsque nous utiliserons une certaine route, nous chargerons les composants correspondants, qui seront. plus efficace

2. Utilisation

import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
export default new Router({
 routes: [
  {
   path: '/',
meta: {
requiresAuth: true
},
   component: resolve => require(['components/Hello.vue'], resolve)
  },
  {
    path: '/about',
    component: resolve => require(['components/About.vue'], resolve)
  }
 ]
})

3. Contrôler les autorisations sur les hooks de routage

//注册全局钩子用来拦截导航

router.beforeEach((to, from, next) => {
 //获取store里面的token
 let token = store.state.token;
 //判断要去的路由有没有requiresAuth
 if(to.meta.requiresAuth){
  if(token){
   next();
  }else{
   next({
    path: '/login',
    query: { redirect: to.fullPath } 
// 将刚刚要去的路由path（却无权限）作为参数，方便登录成功后直接跳转到该路由
   });
  }
 
 }else{
  next();//如果无需token,那么随它去吧
 }
});

Ce qui précède est ce que j'ai compilé pour tout le monde. . J'espère que cela sera utile à l'avenir.

Articles connexes :

Comment utiliser js pour obtenir un effet de carte de focus

Comment utiliser JQUERY pour implémenter plusieurs requêtes AJAX

Compter le nombre d'occurrences d'éléments répétés en JavaScript

Le processus d'encapsulation et de soumission des données dans le formulaire

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!