Detaillierte Erläuterung der Routing-Parameterübergabe und der komponentenübergreifenden Parameterübergabe in Vue

dies.$router.push('/kurs');
dies.$router.push({name: kurs});
dies.$router.go(-1);
dies.$router.go(1);
<router-link to="/course">Kursseite</router-link>
<router-link :to="{name: 'course'}">Kursseite</router-link>

dies.$router.push('/kurs');
dies.$router.push({name: kurs});
dies.$router.go(-1);
dies.$router.go(1);
<router-link to="/course">Kursseite</router-link>
<router-link :to="{name: 'course'}">Kursseite</router-link>

<Vorlage>
 <!-- Tag-Sprung -->
 <router-link :to="`/course/${course.id}/detail`">{{ kurs.name }}</router-link>
</Vorlage>
<Skript>
 // ...
 geheDetail() {
 //Logischer Sprung this.$router.push(`/course/${this.course.id}/detail`);
 }
</Skript>

erstellt() {
 Lassen Sie die ID = this.$route.params.id;
}

erstellt() {
 Lassen Sie die ID = this.$route.params.id;
}

<Vorlage>
 <!-- Tag-Sprung -->
 <Router-Link: zu="{
   Name: 'Kursdetail',
   Abfrage: {id: course.id}
  }">{{ kurs.name }}</router-link>
</Vorlage>
<Skript>
 // ...
 geheDetail() {
  //Logischer Sprung this.$router.push({
   Name: 'Kursdetail',
   Abfrage: {
    ID: diese.Kurs-ID
   }
  });
 }
</Skript>

<Vorlage>
 <!-- Tag-Sprung -->
 <Router-Link: zu="{
   Name: 'Kursdetail',
   Abfrage: {id: course.id}
  }">{{ kurs.name }}</router-link>
</Vorlage>
<Skript>
 // ...
 geheDetail() {
  //Logischer Sprung this.$router.push({
   Name: 'Kursdetail',
   Abfrage: {
    ID: diese.Kurs-ID
   }
  });
 }
</Skript>

exportiere standardmäßig neuen Vuex.Store({
 Zustand: {
  Titel: „Standardwert“
 },
 Mutationen:
  // Mutationen stellen Setter-Methoden für Attribute im Status bereit // Der Name der Setter-Methode ist beliebig, aber die Parameterliste ist auf zwei festgelegt: state, newValue
  setTitle(state, newValue) {
   Status.Titel = neuerWert;
  }
 },
 Aktionen: {}
})

this.$store.state.title = 'newTitle' // Der erste Typ this.$store.commit('setTitle', 'newTitle') // Der zweite Typ

Konsole.log(dies.$store.state.title)

Konsole.log(dies.$store.state.title)

// Der erste Typ importiert Cookies von „vue-cookies“ // Importiere Plugin Vue.use(cookies); // Lade Plugin new Vue({
 // ...
 cookies, //Konfigurieren mit dem Plugin-Prototyp $cookies
}).$mount('#app');

// Der zweite Typ importiert Cookies von „vue-cookies“ // Plugin importieren Vue.prototype.$cookies = cookies; // Plugin-Prototyp $cookies direkt konfigurieren

// Hinzufügen (ändern): Schlüssel, Wert, exp (Ablaufzeit)
// 1 = '1s' | '1m' | '1h' | '1d'
dies.$cookies.set('token', token, '1y');

// Prüfen: Schlüssel
dieses.token = dieses.$cookies.get('token');

// löschen: Taste
dies.$cookies.remove('token');

>: cnpm installiere Axios

importiere axios von 'axios' // Plugin importieren Vue.prototype.$axios = axios; // Plugin-Prototyp $axios direkt konfigurieren

dies.axios({
 url: 'Anforderungsschnittstelle',
 Methode: 'get|post request',
 Daten: {per Post übermittelte Daten usw.},
 Parameter: {übermittelte Daten abrufen}
}).then(Rückruffunktion für erfolgreiche Anfrage).catch(Rückruffunktion für fehlgeschlagene Anfrage)

// Anfrage abrufen this.$axios({
 URL: „http://127.0.0.1:8000/test/ajax/“,
 Methode: 'get',
 Parameter: {
  Benutzername: dieser.Benutzername
 }
}).dann(Funktion (Antwort) {
 console.log(Antwort)
}).catch(Funktion (Fehler) {
 console.log(Fehler)
});

// Anfrage posten this.$axios({
 URL: „http://127.0.0.1:8000/test/ajax/“,
 Methode: 'post',
 Daten: {
  Benutzername: dieser.Benutzername
 }
}).dann(Funktion (Antwort) {
 console.log(Antwort)
}).catch(Funktion (Fehler) {
 console.log(Fehler)
});

// Das Backend empfängt die Anfrage vom Vordergrund und kann die Vordergrunddaten und Anfrageinformationen empfangen. Es stellt fest, dass die angeforderten Informationen keine Anfrage von seinem eigenen Server sind, und weigert sich, auf die Daten zu antworten. Diese Situation wird als Cross-Domain-Problem bezeichnet (Same-Origin-Policy CORS).

// Es gibt drei Ursachen für domänenübergreifende Fehler // 1) Port-Inkonsistenz // 2) IP-Inkonsistenz // 3) Protokoll-Inkonsistenz // So lösen Sie das Problem mit Django - django-cors-headers-Modul // 1) Installation: pip3 install django-cors-headers
// 2) Anmeldung:
INSTALLED_APPS = [
 ...
 'Corsheader'
]
// 3) Middleware einrichten:
MIDDLEWARE = ​​​​[
 ...
 „corsheaders.middleware.CorsMiddleware“
]
// 4) Domänenübergreifend festlegen:
CORS_ORIGIN_ALLOW_ALL = Wahr

>: cnpm i element-ui -S

importiere ElementUI von „element-ui“;
importiere „element-ui/lib/theme-chalk/index.css“;
Vue.use(ElementUI);