Routing jump
this.$('/course');
this.$({name: course});
this.$(-1);
this.$(1);
<router-link to="/course">Course Page</router-link>
<router-link :to="{name: 'course'}">Course Page</router-link>
Routing parameters
Method 1
this.$('/course');
this.$({name: course});
this.$(-1);
this.$(1);
<router-link to="/course">Course Page</router-link>
<router-link :to="{name: 'course'}">Course Page</router-link>
Jump.vue
<template>
<!-- Tag jump -->
<router-link :to="`/course/${}/detail`">{{ }}</router-link>
</template>
<script>
// ...
goDetail() {
// Logical jump this.$(`/course/${}/detail`);
}
</script>
Receive.vue
created() {
let id = this.$;
}
If a route match like:id is written in the routing path (":" is equivalent to the match of the backend, and "id" is equivalent to the name of the named group).
Method 2
created() {
let id = this.$;
}
Jump.vue
<template>
<!-- Tag jump -->
<router-link :to="{
name: 'course-detail',
query: {id: }
}">{{ }}</router-link>
</template>
<script>
// ...
goDetail() {
// Logical jump this.$({
name: 'course-detail',
query: {
id:
}
});
}
</script>
Receive.vue
<template>
<!-- Tag jump -->
<router-link :to="{
name: 'course-detail',
query: {id: }
}">{{ }}</router-link>
</template>
<script>
// ...
goDetail() {
// Logical jump this.$({
name: 'course-detail',
query: {
id:
}
});
}
</script>
Four ways to pass parameters across components
// 1) localStorage: Permanently store data
// 2) sessionStorage: temporary storage of data (refresh page data without resetting, close and restart the tab page data reset)
// 3) Cookie: temporary or permanent storage of data (depending on expiration date)
// 4) vuex's warehouse(): temporary storage of data (refresh page data reset)
vuex repository plugin
Configuration File
export default new ({
state: {
title: 'default value'
},
mutations: {
// mutations provides setter methods for properties in state //The setter method name is arbitrary, but the parameter list is fixed: state, newValue setTitle(state, newValue) {
= newValue;
}
},
actions: {}
})
Assign value to repository variables in any component
this.$ = 'newTitle' // The first typethis.$('setTitle', 'newTitle') //The second type
The second method needs to be setter method provided in mutations. Although this method will eventually pass the value to the state, we can write some verification and other judgments in this setter method.
Take the value of the warehouse variable in any component
(this.$)
vue-cookie plugin
Install
(this.$)
Configuration
// The first typeimport cookies from 'vue-cookies' // Import plugin(cookies); // Load the pluginnew Vue({
// ...
cookies, // Configure the plugin prototype $cookies}).$mount('#app');
// The second typeimport cookies from 'vue-cookies' // Import plugin.$cookies = cookies; // Directly configure plug-in prototype $cookies
use
// Add (change): key, value, exp (expiration time)// 1 = '1s' | '1m' | '1h' | '1d'
this.$('token', token, '1y');
// Check: key = this.$('token');
// Delete: keythis.$('token');
Note: Cookies are usually used to store tokens
// 1) What is token: a string for secure authentication
// 2) Who generated it: background generated
// 3) Who will store: background storage (session table, file, memory cache), front-end storage (cookies)
// 4) How to use: The server is fed back to the front desk (login authentication process), and the front desk submits it to the back desk to complete the authentication (request after login is required)
// 5) Front and backend separation project: the background generates a token and returns it to the frontend => The frontend stores it itself, sends a token request => The background completes the token verification => The background gets the logged-in user
(It is mentioned above that using cookies can also complete the parameter transmission across components. Since the default value is not set in cookies, if it is a null value, the one you get in the view function is also empty. Therefore, we need to set a default value in the view function, and then judge the value passed by cookies. If it is not a null value, use it to replace the default value and then render it)
axios plugin
Install
>: cnpm install axios
Configuration
import axios from 'axios' // Import plugin.$axios = axios; // Directly configure plugin prototype $axios
use
({
url: 'Request interface',
method: 'get|post request',
data: {postSubmitted data},
params: {getSubmitted data}
}).then(A callback function that requests successfully).catch(Callback function that failed request)
Case
// get requestthis.$axios({
url: 'http://127.0.0.1:8000/test/ajax/',
method: 'get',
params: {
username:
}
}).then(function (response) {
(response)
}).catch(function (error) {
(error)
});
// Post requestthis.$axios({
url: 'http://127.0.0.1:8000/test/ajax/',
method: 'post',
data: {
username:
}
}).then(function (response) {
(response)
}).catch(function (error) {
(error)
});
Cross-domain issues (same-origin policy)
// When the background receives a request from the front desk, it can receive the foreground data and request information. If it is found that the requested information is not a request sent by its own server, it refuses to respond to the data. This situation is called - Cross-domain problem (same-origin policy CORS) // There are three types of cross-domain situations// 1) Ports are inconsistent// 2) IP inconsistent// 3) Inconsistent agreement // How to solve Django - django-cors-headers module// 1) Installation: pip3 install django-cors-headers// 2) Register:INSTALLED_APPS = [ ... 'corsheaders' ] // 3) Set middleware:MIDDLEWARE = [ ... '' ] // 4) Set cross-domain:CORS_ORIGIN_ALLOW_ALL = True
element-ui plugin
Install
>: cnpm i element-ui -S
Configuration
import ElementUI from 'element-ui'; import 'element-ui/lib/theme-chalk/'; (ElementUI);
use
According to the official website /#/zh-CN/component/installation api
Summarize
This is the article about routing parameters and cross-component parameters in vue. This is the end. For more related contents of vue routing and cross-component parameters, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!