A Routing Jump

Two ways
1. The direct jump url
    this.$router.push('/course');
    <router-link to="/course">课程页</router-link>;
2. The jump route's nickname
    this.$router.push({name:course});
    <router-link to="{name:'course'}">课程页</router-link>

You can also jump up and down page

Back to previous page
this.$router.go(-1);
To the next page (under must have a history of the case)
this.$router.go(1);

II. Routing mass participation

Two ways

The first

router.js

routes: [
    // ...
    {
        path: '/course/detail/:id',
        name: 'course-detail',
        component: CourseDetail
    },
]

Jump .vue

<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>

Receiving .vue

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

The second

router.js

routes: [
    // ...
    {
        path: '/course/detail',
        name: 'course-detail',
        component: CourseDetail
    },
]

Jump .vue

<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>

Receiving .vue

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

III. Cross-component mass participation

1. You can complete the four-way cross-component parameter passing

// 1) localStorage: permanently store data
// 2) sessionStorage: temporary storage of data (data refresh the page does not reset, shut down and then re-open tab data reset)
// 3) cookie: temporary or permanent storage of data (determined by the expiration time)
// 4) vuex warehouse (store.js): temporary storage of data (refresh the page data reset)

2.vue warehouse plugin

store.js profile

export default new Vuex.Store({
    state: {
        title: 'Default'
    },
    mutations: {
        // mutations provide a setter for the state property
        // setter method name at random, but fixed parameter list two: state, newValue
        setTitle(state, newValue) {
            state.title = newValue;
        }
    },
    actions: {}
})

In any component can be assigned to a variable warehouse

this.$store.state.title = 'newTitle'
this.$store.commit('setTitle', 'newTitle')

In any component the variable can take values warehouse

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

III. Configuring vue-cookies and plug-ins axios

1. vue-cookies plug

cookie are generally used to store the token

1. What is the token
    token is a string of safety certification
2. Who created
    Front transmission data, generating a token according to the background data transmission over
3. Who storage
    Backing store (session tables, files, memory buffers), front storage (cookie)
4. How to use
    Mr. servers to back to the front desk (login authentication process), submitted to the foreground to the background to complete the authentication (login required after the request)
Item 5. The longitudinal separation station
    Background generated token, returned to the front desk own store, send a request to carry token, token complete background check, background get logged-on user

Install plug-vue-cookie

Enter the command in the terminal
>: cnpm install vue-cookies

main.js configuration file

// The first
import cookies from 'vue-cookies' // Import widget
Vue.use (cookies); // load the plug
new view ({
    // ...
    cookies, // configuration uses plug-in prototype $ cookies
}).$mount('#app');

// The second
import cookies from 'vue-cookies' // Import widget
. Vue.prototype $ cookies = cookies; // direct configuration plug-in prototype $ cookies

use

// add (to change): key, value, exp (expiration date)
// 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');

2. axios plug

installation

>: cnpm install axios

main.js Configuration

import axios from 'axios' // Import widget
. Vue.prototype $ axios = axios; // direct configuration plug-in prototype $ axios

use

this.axios ({
    url: 'request interface',
    method: 'get | post request'
    {Post submitted data and the like},: data
    params: {get data submitted}
}). Then (callback request is successful) .catch (request failed callback function)

Case

// 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)
});

Back-end middleware csrf need to cut out, and the need to address cross-domain issues

Cross-domain issues (same origin policy)

// received the request back to the foreground, and may receive a data reception request information, the requested information is not found in the local server requests sent, data rejection response, this is termed - cross-domain problem (origin policy CORS)

// lead to cross-domain situation, there are three
// 1) is inconsistent port
// 2) IP inconsistency
// 3) the agreement of the

How to solve // Django - django-cors-headers module
// 1) installation: pip3 install django-cors-headers
// 2) Registration:
INSTALLED_APPS = [
    ...
    'corsheaders'
]
// 3) Set Middleware:
MIDDLEWARE = [
    ...
    'corsheaders.middleware.CorsMiddleware'
]
// 4) cross-domain settings:
CORS_ORIGIN_ALLOW_ALL = True

3. Element plug-ui