Vue routing jumps for parameter passing, plug-in installation and configuration

Routing Jump

the this . router.push $ ( '/ Course' );               
 the this . $ router.push ({name: Course}); 

the this . $ router.go (-1);    // back an 
the this . $ router.go ( 1);   // advance a
 
<router-link to = "/ course"> course page </ Router-Link> 
<Router-Link: to = "{name: 'course'}"> course page </ router- link>

 

 

Routing parameter passing

The first

router.js

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

 

Jump .vue

<template>
    <router-link  :to="`/course/${course.id}/detail`">{{course.name}}</router-link>
</template>

<script>
    //...
    goDetail(){
           this.$router.push(`/course/${this.course.id}/detail`);
    }

</script>

 

Receiving .vue

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

 

 

The second

router.js

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

 

Jump .vue

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

 

Receiving .vue

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

 

 

Data exchange between components (cross component parameter passing)

Components can have parent-child relationship can also be unrelated

Methods have parent-child relationship can be passed from father to son through the father of the child

If there is no parent-child relationship that we will need to complete the data exchange between the components not associated by way of a data storage has become a cross-component mass participation

 

4 ways to cross-component parameter passing

1.localSorage: permanent storage database

2.sessionStorage: temporary storage of data (data refresh the page does not reset, shut down and re-open the page data reset)

3.cookie: temporary or permanent storage of data (determined by the expiration event)

4.vuex warehouse (store.js): temporary storage of data (refresh the page data reset)

 

vuex warehouse (store.js)

store.js

Export default  new new Vuex.Store ({ 
    state: { 
        title: 'Default' 
    }, 
    mutations: { 
        // mutations state setter for providing attributes 
        // setter method name arbitrary, but the two fixed list of parameters: state, newValue 
        setTitle (State, newValue) { 
            state.title = newValue; 
        } 
    }, 
    Actions: {} 
})

 

Assignment .vue

the this . store.state.title $ = 'the newTitle' // dictionary directly state 

the this . store.commit $ ( 'setTitle', 'the newTitle') // property methods by mutations in

 

Value .vue

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

 

 

Plug-in uses

vue-cookie plugin

installation

cnpm install vue-cookies

 

main.js Configuration

// first 
Import from Cookies 'Cookies-VUE'    // Import Plug 
Vue.use (Cookies);         // load the plug 
new new Vue ({
     // ... 
    Cookies,                  // configured to use the prototype plug Cookies $ 
}). Mount $ ( '# App' ); 


// second 
import from Cookies 'Cookies-VUE'    // import plug 
Vue.prototype $ = Cookies Cookies;.     // disposed directly widget prototype $ Cookies

 

use

// add (to change): key, value, exp (expiration date) 
// 1 = '1S' | '1M' | '1H' | '1D' 
the this . $ Cookies.set ( 'token', token, '1Y ' ); 

// check: Key 
the this .token = the this $ cookies.get (.' token ' ); 

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

 

Note: cookie are generally used to store the token

1 . What is a token: security authentication string
 2 . Who produced: background generated
 3 Who storage: Background storage (session tables, files, memory buffers), front storage (the cookie)
 4 . How to use: Mr. servers as the feedback to the front (login authentication process), the foreground to the background submitted for authentication (login request after required)
 station before and after the separation of item 5.: background generation token, return to the front => own foreground memory, token request message carrying => background complete verification token => backstage to get the logged in user

 

 

axios plug

installation

cnpm install axios

 

main.js Configuration

Axios from Import 'Axios'     // Import Plug 
Vue.prototype $ = Axios Axios;.     // disposed directly widget prototype $ Axios

 

use

the this .axios ({ 
    URL: 'request interface' , 
    Method: 'get | POST request' , 
    Data: the data submitted {post etc.}, 
    the params: {get data submitted} 
}) the then (request successful callback function). . the catch (request failure callback function)

 

 

In this case an error occurs when the front and rear ends to do this is cross-domain data exchange problem

Cross-domain issues (same origin policy)

// background foreground receiving the request, the reception data may be received 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) 

/ / results in the case of three cross-domain 
@ 1) inconsistent port 
// 2) the IP inconsistent 
// 3) agreement of 

// the Django how to solve - django-cors-headers module 
@ 1) installation: pip3 install django-cors-headers 
// 2) Register: 
the INSTALLED_APPS = [ 
    ...
     'corsheaders' 
] 
// . 3) disposed intermediate: 
mIDDLEWARE = [ 
    ...
     'corsheaders.middleware.CorsMiddleware' 
] 
// . 4) disposed across domains: 
CORS_ORIGIN_ALLOW_ALL = True

 

 

Plug-element-ui

installation

cnpm i element-ui -S

 

main.js Configuration

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

 

use

In accordance with the official website https://element.eleme.cn/ # / ZH-the CN / Component / Installation API