this.$router.push('/course');
this.$router.push({name: course});
this.$router.go(-1);
this.$router.go(1);
<router-link to="/course">課程頁(yè)</router-link>
<router-link :to="{name: 'course'}">課程頁(yè)</router-link>

this.$router.push('/course');
this.$router.push({name: course});
this.$router.go(-1);
this.$router.go(1);
<router-link to="/course">課程頁(yè)</router-link>
<router-link :to="{name: 'course'}">課程頁(yè)</router-link>

<template>
 <!-- 標(biāo)簽跳轉(zhuǎn) -->
 <router-link :to="`/course/${course.id}/detail`">{{ course.name }}</router-link>
</template>
<script>
 // ...
 goDetail() {
 // 邏輯跳轉(zhuǎn)
 this.$router.push(`/course/${this.course.id}/detail`);
 }
</script>

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

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

<template>
 <!-- 標(biāo)簽跳轉(zhuǎn) -->
 <router-link :to="{
   name: 'course-detail',
   query: {id: course.id}
  }">{{ course.name }}</router-link>
</template>
<script>
 // ...
 goDetail() {
  // 邏輯跳轉(zhuǎn)
  this.$router.push({
   name: 'course-detail',
   query: {
    id: this.course.id
   }
  });
 }
</script>

<template>
 <!-- 標(biāo)簽跳轉(zhuǎn) -->
 <router-link :to="{
   name: 'course-detail',
   query: {id: course.id}
  }">{{ course.name }}</router-link>
</template>
<script>
 // ...
 goDetail() {
  // 邏輯跳轉(zhuǎn)
  this.$router.push({
   name: 'course-detail',
   query: {
    id: this.course.id
   }
  });
 }
</script>

export default new Vuex.Store({
 state: {
  title: '默認(rèn)值'
 },
 mutations: {
  // mutations 為 state 中的屬性提供setter方法
  // setter方法名隨意，但是參數(shù)列表固定兩個(gè)：state, newValue
  setTitle(state, newValue) {
   state.title = newValue;
  }
 },
 actions: {}
})

this.$store.state.title = 'newTitle' // 第一種
this.$store.commit('setTitle', 'newTitle') //第二種

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

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

// 第一種
import cookies from 'vue-cookies'  // 導(dǎo)入插件
Vue.use(cookies);     // 加載插件
new Vue({
 // ...
 cookies,      // 配置使用插件原型 $cookies
}).$mount('#app');

// 第二種
import cookies from 'vue-cookies' // 導(dǎo)入插件
Vue.prototype.$cookies = cookies; // 直接配置插件原型 $cookies

// 增(改): key，value，exp(過(guò)期時(shí)間)
// 1 = '1s' | '1m' | '1h' | '1d'
this.$cookies.set('token', token, '1y');

// 查：key
this.token = this.$cookies.get('token');

// 刪：key
this.$cookies.remove('token');

>: cnpm install axios

import axios from 'axios' // 導(dǎo)入插件
Vue.prototype.$axios = axios; // 直接配置插件原型 $axios

this.axios({
 url: '請(qǐng)求接口',
 method: 'get|post請(qǐng)求',
 data: {post等提交的數(shù)據(jù)},
 params: {get提交的數(shù)據(jù)}
}).then(請(qǐng)求成功的回調(diào)函數(shù)).catch(請(qǐng)求失敗的回調(diào)函數(shù))

// get請(qǐng)求
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請(qǐng)求
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)
});

// 后臺(tái)接收到前臺(tái)的請(qǐng)求，可以接收前臺(tái)數(shù)據(jù)與請(qǐng)求信息，發(fā)現(xiàn)請(qǐng)求的信息不是自身服務(wù)器發(fā)來(lái)的請(qǐng)求，拒絕響應(yīng)數(shù)據(jù)，這種情況稱之為 - 跨域問(wèn)題（同源策略 CORS）

// 導(dǎo)致跨域情況有三種
// 1) 端口不一致
// 2) IP不一致
// 3) 協(xié)議不一致

// Django如何解決 - django-cors-headers模塊
// 1) 安裝：pip3 install django-cors-headers
// 2) 注冊(cè)：
INSTALLED_APPS = [
 ...
 'corsheaders'
]
// 3) 設(shè)置中間件：
MIDDLEWARE = [
 ...
 'corsheaders.middleware.CorsMiddleware'
]
// 4) 設(shè)置跨域：
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);