Route Jumpthis.$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> Routing parametersMethod 1 router.js 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> 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> Receive.vue created() { let id = this.$route.params.id; } If you write a route match like :id in the routing path (“:” is equivalent to the backend match, “id” is equivalent to the name of the named group). Method 2 router.js created() { let id = this.$route.params.id; } 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> Receive.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> Four ways to pass parameters across components
vuex warehouse pluginstore.js configuration file 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: {} }) Assigning values to repository variables in any component this.$store.state.title = 'newTitle' // The first type this.$store.commit('setTitle', 'newTitle') // The second type The second type is the setter method provided in mutations. Although this method ultimately passes the value to the state, we can write some validation and other judgments in this setter method. Get the value of the warehouse variable in any component console.log(this.$store.state.title) vue-cookie pluginInstall console.log(this.$store.state.title) main.js configuration // 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 use // 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'); Note: Cookies are generally used to store tokens.
(As mentioned above, cross-component parameter passing can also be accomplished using cookies. Since there is no default value set in cookies, if it is an empty value, the value obtained in the view function is also empty, so we also need to set a default value in the view function, and then judge the value passed by cookies. If it is not an empty value, replace the default value with it and then render it) axios pluginInstall >: cnpm install axios main.js configuration import axios from 'axios' // Import plugin Vue.prototype.$axios = axios; // Directly configure plugin prototype $axios use 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) 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) }); Cross-domain issues (same-origin policy) // 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 element-ui pluginInstall >: 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 According to the official website https://element.eleme.cn/#/zh-CN/component/installation api SummarizeThis is the end of this article about route parameter passing and cross-component parameter passing in Vue. For more relevant Vue routing and cross-component parameter passing content, please search for previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future! You may also be interested in:
|
<<: How to handle the failure of inserting rare characters in MySQL (Incorrect string value)
>>: Tutorial on installing MySQL 5.7.9 using RPM package under CentOS 7
HTML img produces an ugly blue border after addin...
This article introduces how to install MySQL 8.0 ...
Color is one of the most important elements for a...
This article shares the specific code of JS+Canva...
There are two types: (different browsers) 1. Avail...
In this blog, we will discuss ten performance set...
Before hiding: After hiding: CSS: Copy code The co...
Table of contents Preface 1. Use for...of to iter...
This article shares with you the graphic tutorial...
Background: During the development process, we of...
Recently, there has been a growing demand for imp...
<br />Without any warning, I saw news on cnB...
For a long time, website development was hampered...
Table of contents forEach() (ES6) method map() (E...
To do MySQL performance adjustment and service st...