Comment supprimer # dans le projet vue

Cet article présente principalement comment supprimer # dans le projet vue et sa compatibilité avec ie9. L'éditeur pense que c'est plutôt bien. Maintenant, je vais le partager avec vous et vous donner une référence. Suivons l'éditeur et jetons un œil. J'espère que cela pourra aider tout le monde.

1. Comment supprimer le # de l'adresse d'accès dans le projet vue router/index.js)

2.

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
    }
   ]
  }
 ]
})

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 ~

Recommandations associées :

Explication sur la façon dont webpack et vue2 construisent le squelette de un projet vue

Partage des composants communs et des structures de cadre des projets vue

Définition de variables globales et de méthodes de fonction globales dans les projets vue

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!