Detailed Explanation of Routing and Cross component Parameter Transfer in vue
- 2021-11-01 02:12:48
- OfStack
Routing 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 parameter transfer
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() {
// Logical jump
this.$router.push(`/course/${this.course.id}/detail`);
}
</script>Receiving. vue
created() {
let id = this.$route.params.id;
}If a route match such as: id is written in the route path (":" is equivalent to a backend match, and "id" is equivalent to the name of a famous packet).
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() {
// Logical jump
this.$router.push({
name: 'course-detail',
query: {
id: this.course.id
}
});
}
</script>Receiving. vue
<template>
<!-- Tag jump -->
<router-link :to="{
name: 'course-detail',
query: {id: course.id}
}">{{ course.name }}</router-link>
</template>
<script>
// ...
goDetail() {
// Logical jump
this.$router.push({
name: 'course-detail',
query: {
id: this.course.id
}
});
}
</script>Four ways to pass parameters across components
//1) localStorage: Permanently storing data
//2) sessionStorage: Temporarily store data (refresh page data without reset, close and reopen tab data reset)
//3) cookie: Temporary or permanent storage of data (determined by expiration time)
//4) Warehouse for vuex (store. js): Temporarily store data (refresh page data reset)
vuex warehouse plug-in
store. js configuration file
export default new Vuex.Store({
state: {
title: ' Default value '
},
mutations: {
// mutations For state The properties in the setter Method
// setter The method name is optional, but the parameter list is fixed by two: state, newValue
setTitle(state, newValue) {
state.title = newValue;
}
},
actions: {}
})Assign a value to a warehouse variable in an arbitrary component
this.$store.state.title = 'newTitle' // No. 1 1 Species
this.$store.commit('setTitle', 'newTitle') // No. 1 2 Species The second one is the setter method provided in mutations. Although this method finally transfers the value to state, we can write some verification and other judgments in this setter method
Take the value of warehouse variable in any component
console.log(this.$store.state.title)
vue-cookie plug-in
Installation
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>
main. js configuration
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>
Use
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>
Note: cookie1 is generally used to store token
//1) What is token: A string for security authentication
//2) Who produced it: Background production
//3) Who will store: Background storage (session table, file, memory cache), Foreground storage (cookie)
//4) How to use: The server will feed back to the foreground (login authentication process), and the foreground will submit it to the background to complete authentication (request after login is required)
//5) Background and Background Separation Project: Generate token in the background and return to the foreground = > The foreground stores and sends token requests by itself = > Complete token verification in the background = > Get the login user in the background
(As mentioned above, cross-component referencing can also be done with cookie, Since there is no default value in cookies, so if it is null, it is also null in the view function, so we should also set a default value in the view function, and then judge the value passed from cookies. If it is not null, replace the default value with it and render it)
axios plug-in
Installation
>: cnpm install axios
main. js configuration
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>
Use
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>
Case
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>
Cross-domain problem (homologous strategy)
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>
element-ui plug-in
Installation
>: cnpm i element-ui -S
main. js configuration
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>
Use
According to official website https://element.eleme.cn/#/zh-CN/component/installation api