Detailed explanation of routing parameter passing and cross-component parameter passing in Vue

this.$router.push('/course');
this.$router.push({name: course});
this.$router.go(-1);
this.$router.go(1);
<router-link to="/course">Course Page</router-link>
<router-link :to="{name: 'course'}">Course page</router-link>

this.$router.push('/course');
this.$router.push({name: course});
this.$router.go(-1);
this.$router.go(1);
<router-link to="/course">Course Page</router-link>
<router-link :to="{name: 'course'}">Course page</router-link>

<template>
 <!-- Tag jump -->
 <router-link :to="`/course/${course.id}/detail`">{{ course.name }}</router-link>
</template>
<script>
 // ...
 goDetail() {
 //Logic jump this.$router.push(`/course/${this.course.id}/detail`);
 }
</script>

created() {
 let id = this.$route.params.id;
}

created() {
 let id = this.$route.params.id;
}

<template>
 <!-- Tag jump -->
 <router-link :to="{
   name: 'course-detail',
   query: {id: course.id}
  }">{{ course.name }}</router-link>
</template>
<script>
 // ...
 goDetail() {
  //Logic jump this.$router.push({
   name: 'course-detail',
   query: {
    id: this.course.id
   }
  });
 }
</script>

<template>
 <!-- Tag jump -->
 <router-link :to="{
   name: 'course-detail',
   query: {id: course.id}
  }">{{ course.name }}</router-link>
</template>
<script>
 // ...
 goDetail() {
  //Logic jump this.$router.push({
   name: 'course-detail',
   query: {
    id: this.course.id
   }
  });
 }
</script>

export default new Vuex.Store({
 state: {
  title: 'Default value'
 },
 mutations:
  // mutations provide setter methods for attributes in state // The name of the setter method is arbitrary, but the parameter list is fixed to two: state, newValue
  setTitle(state, newValue) {
   state.title = newValue;
  }
 },
 actions: {}
})

this.$store.state.title = 'newTitle' // The first type this.$store.commit('setTitle', 'newTitle') // The second type

console.log(this.$store.state.title)

console.log(this.$store.state.title)

// The first type import cookies from 'vue-cookies' // Import plugin Vue.use(cookies); // Load plugin new Vue({
 // ...
 cookies, //Configure using plugin prototype $cookies
}).$mount('#app');

// The second type import cookies from 'vue-cookies' // Import plugin Vue.prototype.$cookies = cookies; // Directly configure plugin prototype $cookies

// Add (change): key, value, exp (expiration time)
// 1 = '1s' | '1m' | '1h' | '1d'
this.$cookies.set('token', token, '1y');

// Check: key
this.token = this.$cookies.get('token');

// delete: key
this.$cookies.remove('token');

>: cnpm install axios

import axios from 'axios' // Import plugin Vue.prototype.$axios = axios; // Directly configure plugin prototype $axios

this.axios({
 url: 'Request interface',
 method: 'get|post request',
 data: {data submitted by post, etc.},
 params: {get submitted data}
}).then(callback function for successful request).catch(callback function for failed request)

// get request this.$axios({
 url: 'http://127.0.0.1:8000/test/ajax/',
 method: 'get',
 params: {
  username: this.username
 }
}).then(function (response) {
 console.log(response)
}).catch(function (error) {
 console.log(error)
});

// post request this.$axios({
 url: 'http://127.0.0.1:8000/test/ajax/',
 method: 'post',
 data: {
  username: this.username
 }
}).then(function (response) {
 console.log(response)
}).catch(function (error) {
 console.log(error)
});

// The backend receives the request from the foreground, and can receive the foreground data and request information. It finds that the requested information is not a request from its own server, and refuses to respond to the data. This situation is called a cross-domain problem (same-origin policy CORS)

// There are three causes of cross-domain errors // 1) Port inconsistency // 2) IP inconsistency // 3) Protocol inconsistency // How to solve it with Django - django-cors-headers module // 1) Installation: pip3 install django-cors-headers
// 2) Registration:
INSTALLED_APPS = [
 ...
 'corsheaders'
]
// 3) Set up middleware:
MIDDLEWARE = ​​[
 ...
 'corsheaders.middleware.CorsMiddleware'
]
// 4) Set cross-domain:
CORS_ORIGIN_ALLOW_ALL = True

>: cnpm i element-ui -S

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);