Interprétation détaillée de la compatibilité ie9 dans VUE

Cet article présente principalement comment supprimer # dans le projet vue et sa compatibilité ie9. Maintenant, je le partage avec vous et vous donne une référence.

1. Comment supprimer l'adresse d'accès dans le projet vue #

Ajouter un mode dans la configuration de routage dans vue2 (le projet créé par vue-cli est en src /router/index .js)

export default new Router({
 mode: 'history',
 routes: [
  {
   path: '/',
   name: 'menu',
   component: menu,
   children: [
    {
     path: 'organization',
     component: organization,
     children: [
      {
       path: '',
       redirect: 'organizationSub'
      },
      {
       path: 'organizationSub',
       component: organizationSub
      }
     ]
    },
    {
     path: 'user',
     component: user
    },
    {
     path: 'role',
     component: role
    }
   ]
  }
 ]
})

2. Principe de routage Vue

Mode de hachage 2.1 : le mode de routage par défaut de vue-router.

Une application monopage développée par vue, il n'y a qu'un seul html, et le changement d'url lors du changement simule l'url complète grâce au mode de hachage de l'url.

2.2 Mode historique : mode de configuration : 'historique' dans vue2.

Utilisez l'API history.pushState pour terminer le saut d'URL

Introduction au site officiel du mode Historique HTML5 : https://router.vuejs.org/zh-cn/essentials/history-mode. html

3. Notes

Cependant, pour bien jouer à ce mode, vous avez également besoin d'une prise en charge de la configuration en arrière-plan. Parce que notre application est une application client d'une seule page, si l'arrière-plan n'est pas configuré correctement, lorsque l'utilisateur accède directement à http://oursite.com/user/id dans le navigateur, 404 sera renvoyé, ce qui n'est pas beau .

Vous devez donc ajouter une ressource candidate côté serveur qui couvre toutes les situations : si l'URL ne correspond à aucune ressource statique, elle doit renvoyer la même page index.html, qui est la page de votre application. dépend.

vue-router est présenté sur le site officiel, et il existe également des exemples de configuration en arrière-plan : https://router.vuejs.org/zh-cn/essentials/history-mode.html

4. Compatibilité

Après les tests, le mode : 'history' ne prend pas effet sous ie9 Si le projet vue doit être compatible avec ie9 et que l'arrière-plan a une vérification stricte de l'accès. adresses, il n’est pas recommandé d’utiliser ce mode. S'il y a des erreurs ou des omissions dans le contenu, vous êtes invités à me critiquer et à me corriger ~

Ce qui précède est ce que j'ai compilé pour vous, j'espère qu'il vous sera utile à l'avenir.

Articles connexes :

Comment implémenter des rappels à l'aide de Promise dans l'applet WeChat ?

Concept et utilisation du mode commande en JS (tutoriel détaillé)

Utiliser le sélénium pour capturer les informations de données Taobao

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!