Implementation of vue Page Jump
- 2021-10-16 01:04:17
- OfStack
1. this.$router.push()
1. vue
<template>
<div id='test'>
<button @click='goTo()'> Click to jump 4</button>
</div>
</template>
2. script
// Page transfer parameters before jumping:
goTo(item) {
//storageData The data in is used to jump to the following 1 After 10 pages, you can return to the page before the jump when you return
let storageData = {
searchWords: this.keyWord,
pageSize: this.paging.pageSize,
pageNo: this.paging.currentPage
};
//data The data in is used to apply the data in this page to the following through the jump function 1 Pages, similar to parent-child component value transfer
let data = {
type: item.srcType,
tableName: item.tableName,
name: item.datasourceName,
tableId: item.tableId,
id: item.datasourceId,
};
// Will go down 1 All the data that will be used in each page push To $router Medium
this.$router.push({
//name Represents the resource front-end access path after the jump, query For storing data to be used, where page Is this page name,
name: 'onlineSearch',
query: {targetData: data ,storageData,
page:'search',
isBackSelect: true,
goBackName : 'dataSearch'
}
})
}
3. Get the parameter value of the previous page from the jumped page
// After jumping, the page gets parameters :
mounted() {
// Check whether the parameter has been passed to the page after the jump. If it is passed, it will be called according to the demand
console.log(this.$route.query.targetData;)
}
4. Return to the page before jumping from the page after jumping
// Write the return function to methods Medium
goBackSheet() {
if(this.$route.query.goBackName === 'dataSearch'){
this.$router.push({
name: this.pageName,
query: {
storageData: this.$route.query.storageData,
isBackSelect: true,
}
});
}
}
2. router-link jump
1. Specify the destination address through the to attribute
query is equivalent to get request. When the page jumps, you can see the request parameters in the address bar;
query refresh will not lose the data in query;
query is to be introduced with path.
params is equivalent to post request, and parameters will not be displayed in the address bar;
params refresh will lose the data in params;
params is to be introduced with name.
<!-- Named route -->
<router-link :to="{ name: 'user', params: { userId: 123 }}" @click.native='goTo'>User</router-link>
<!-- With query parameters, the following result is /register?plan=private -->
<router-link :to="{ path: 'register', query: { plan: 'private' }}" @click.native='goTo'>Register</router-link>
2. After jumping, the page
watch:{
$route(to,from){
// Refresh page
this.$router.go(1);
}
}
The above is the vue page jump implementation details, more about vue page jump information please pay attention to this site other related articles!