So entfernen Sie # im Vue-Projekt

In diesem Artikel wird hauptsächlich das Entfernen von # im Vue-Projekt und dessen ie9-Kompatibilität vorgestellt. Der Herausgeber findet es ziemlich gut. Jetzt werde ich es mit Ihnen teilen und Ihnen eine Referenz geben. Folgen wir dem Herausgeber und schauen wir uns das an. Ich hoffe, es kann allen helfen.

1. So entfernen Sie die # der Zugriffsadresse im Vue-Projekt (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
    }
   ]
  }
 ]
})

2.1 Hash-Modus: Standard-Routing-Modus des Vue-Routers.

Eine von Vue entwickelte Einzelseitenanwendung, es gibt nur einen HTML-Code, und die Änderung der URL beim Umschalten simuliert die vollständige URL durch den Hash-Modus der URL.

2.2 Verlaufsmodus: Konfigurationsmodus: „Verlauf“ in vue2.

Verwenden Sie die API „history.pushState“, um den URL-Sprung abzuschließen

Einführung in die offizielle Website des HTML5-Verlaufsmodus: https://router.vuejs.org/zh-cn/essentials/history-mode. html

3. Hinweise

Um diesen Modus gut abzuspielen, benötigen Sie jedoch auch Hintergrundkonfigurationsunterstützung. Da es sich bei unserer Anwendung um eine Single-Page-Client-Anwendung handelt, wird 404 zurückgegeben, wenn der Hintergrund nicht korrekt konfiguriert ist und der Benutzer im Browser direkt auf http://oursite.com/user/id zugreift .

Sie müssen also auf der Serverseite eine Kandidatenressource hinzufügen, die alle Situationen abdeckt: Wenn die URL mit keiner statischen Ressource übereinstimmt, sollte sie dieselbe index.html-Seite zurückgeben, also die Seite Ihrer App hängt davon ab.

vue-router wird auf der offiziellen Website vorgestellt und es gibt auch Hintergrundkonfigurationsbeispiele: https://router.vuejs.org/zh-cn/essentials/history-mode.html

4. Kompatibilität

Nach dem Testen wird der Modus „Verlauf“ unter ie9 nicht wirksam, wenn das Vue-Projekt mit ie9 kompatibel sein muss und der Hintergrund eine strikte Zugriffsüberprüfung hat Adressen wird die Verwendung dieses Modus nicht empfohlen. Wenn es Fehler oder Auslassungen im Inhalt gibt, können Sie mich gerne kritisieren und korrigieren~

Verwandte Empfehlungen:

Erklärung zum Aufbau des Vue-Projektskeletts mit Webpack und vue2

Austausch über gemeinsame Komponenten und Framework-Strukturen von Vue-Projekten

Definieren globaler Variablen und globaler Funktionsmethoden in Vue-Projekten

Das obige ist der detaillierte Inhalt vonSo entfernen Sie # im Vue-Projekt. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!