How to implement vue page jump

1. this.$router.push()

1. Vue

<template>
  <div id='test'>
    <button @click='goTo()'>Click to jump 4</button>
  </div>
</template>

2. Script

// Pass parameters before jumping to the previous page:
goTo(item) {
  //The data in storageData is used to jump to the next page, and when returning, it can return to the page before the jump let storageData = {
    searchWords: this.keyWord,
    pageSize: this.paging.pageSize,
    pageNo: this.paging.currentPage 
  };
  //The data in data is used to apply the data in this page to the next page through the jump function, similar to the parent-child component value transfer let data = {
    type: item.srcType,
    tableName: item.tableName,
    name: item.datasourceName,
    tableId: item.tableId,
    id: item.datasourceId,
  };
  //Push all the data that will be used in the next page to $router this.$router.push({
    //name indicates the front-end access path of the resource after the jump, query is used to store the data to be used, where page is the name of this page,
    name: 'onlineSearch',
    query: {targetData: data ,storageData,
      page:'search',
      isBackSelect: true,
      goBackName: 'dataSearch'
    }
  })    
}

3. Get the parameter value of the previous page in the page after jumping

//Get the parameters of the page after jumping:
mounted() {
  // Check whether the parameters have been passed to the page after the jump. If passed, call console.log(this.$route.query.targetData;) as required
}

4. Return to the page before the jump from the page after the jump

//Write the return function into methods 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 target address through the to attribute

Query is equivalent to a get request. When the page jumps, you can see the request parameters in the address bar;

Query refresh will not lose the data in the query;

The query should be introduced using path.

params is equivalent to a post request, and the parameters will no longer be displayed in the address bar;

Refreshing params will lose the data in params;

Params should be introduced by name.

<!-- Named Routes -->
<router-link :to="{ name: 'user', params: { userId: 123 }}" @click.native='goTo'>User</router-link>

<!-- With query parameters, the result below is /register?plan=private -->
<router-link :to="{ path: 'register', query: { plan: 'private' }}" @click.native='goTo'>Register</router-link>

2. Redirect page

watch:{
   $route(to,from){
      //Refresh the page this.$router.go(1);
   }  
}

The above is the detailed content of the implementation method of vue page jump. For more information about vue page jump, please pay attention to other related articles on 123WORDPRESS.COM!

You may also be interested in: