Maison > interface Web > js tutoriel > le corps du texte

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

亚连
Libérer: 2018-06-21 10:57:30
original
1998 Les gens l'ont consulté

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)
  }
 ]
})
Copier après la connexion

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,那么随它去吧
 }
});
Copier après la connexion

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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois:Formation PHP en ligne sur le bien-être public,Aidez les apprenants PHP à grandir rapidement!