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!


Related articles: