Detailed explanation of routing parameter passing and cross-component parameter passing in Vue

Detailed explanation of routing parameter passing and cross-component parameter passing in Vue

Route Jump

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>

Routing parameters

Method 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

// 1) localStorage: Permanently store data
// 2) sessionStorage: Temporary storage of data (data is not reset when refreshing the page, and is reset when closing and reopening the tab)
// 3) Cookie: Temporary or permanent storage of data (determined by expiration time)
// 4) vuex warehouse (store.js): temporary storage data (refresh page data reset)

vuex warehouse plugin

store.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 plugin

Install

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.

// 1) What is a token: a string for security authentication
// 2) Who generates it: generated by the background
// 3) Who stores: background storage (session table, file, memory cache), front-end storage (cookie)
// 4) How to use: The server generates feedback to the front desk (login authentication process), and the front desk submits it to the back desk to complete the authentication (request after login)
// 5) Front-end and back-end separation project: the back-end generates a token and returns it to the front-end => the front-end stores it by itself and sends a request with the token => the back-end completes the token verification => the back-end obtains the logged-in user

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

Install

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

Install

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

Summarize

This 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:
  • Vue dynamic routing configuration and routing parameter passing method
  • Vue routing jump parameter method
  • Solution to the problem of loss of refresh parameters on the Vue routing page
  • 3 basic modes of vue routing parameter transmission
  • A brief discussion on the method of passing parameters in vue-router routing
  • Summary of the basic implementation methods of Vue routing parameter passing [three methods]
  • How to pass parameters between vue-router2.0 components and obtain dynamic parameters
  • Vue.js parameter transfer example between parent and child components

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

Recommend

Solve the problem of ugly blue border after adding hyperlink to html image img

HTML img produces an ugly blue border after addin...

MySQL 8.0 installation tutorial under Linux

This article introduces how to install MySQL 8.0 ...

Color matching techniques and effect display for beauty and styling websites

Color is one of the most important elements for a...

JS+Canvas draws a lucky draw wheel

This article shares the specific code of JS+Canva...

Div exceeds hidden text and hides the CSS code beyond the div part

Before hiding: After hiding: CSS: Copy code The co...

Object.entries usage you don't know in JavaScript

Table of contents Preface 1. Use for...of to iter...

How to use time as a judgment condition in MySQL

Background: During the development process, we of...

Ant Design Blazor component library's routing reuse multi-tab function

Recently, there has been a growing demand for imp...

Experience of redesigning the homepage of TOM.COM

<br />Without any warning, I saw news on cnB...

Add unlimited fonts to your website with Google Web Fonts

For a long time, website development was hampered...

Use of MySQL SHOW STATUS statement

To do MySQL performance adjustment and service st...