How to encapsulate jump method in uniapp

In the process of developing uniapp applications, you often need to jump to different pages, such as entering the login page, personal center page, etc. In order to facilitate development, we can encapsulate a jump method to uniformly manage page jumps. This article will introduce how to encapsulate the jump method in uniapp.

1. Encapsulated jump method

1. Create a new util.js file to store the encapsulated method, and define a method named navigateTo in the file. This method receives two parameters, the first parameter is the target page path, and the second parameter is the data that needs to be passed. Among them, the path parameter is required and the data is optional.

// util.js

export function navigateTo(url, data = {}) {
  uni.navigateTo({
    url: `${url}?${getObjectKeys(data)
      .map(key => `${key}=${data[key]}`)
      .join('&')}`
  });
}

function getObjectKeys(obj) {
  return Object.keys(obj);
}

2. In the method, we use getObjectKeys to get all the key names in the data object, and then use the map and join methods to splice the key-value pairs into a string. We can briefly introduce the map and join methods here:

The map() method creates a new array, and the result is the result returned after each element in the array calls a provided function. .

The join() method converts all elements in the array (if it is a string, output it directly; if it is an array and object, convert it to a string) into a string, and then concatenate the string into a single String. And you can specify a string as the separator to separate the elements in the array.

3. Finally, we export this method for use by other modules.

2. Use the encapsulated jump method

1. Where you need to jump to the target page, call the encapsulated navigateTo method.

//index.vue

import { navigateTo } from '@/utils/util.js';

// 模拟获取用户登录状态
const isLogin = true;

export default {
  methods: {
    goLogin() {
      if (!isLogin) {
        navigateTo('/pages/login/login'); // 跳转到登录页面
      } else {
        navigateTo('/pages/personal/personal'); // 跳转到个人中心页面
      }
    }
  }
}

2. In the above example, we determine whether the user is logged in based on the value of isLogin. If not logged in, it will jump to the login page. If it is logged in, it will jump to the personal center page.

So far, we have successfully encapsulated a jump method and used it in other components. In this way, we can avoid code confusion caused by complex page jump logic and improve the readability and maintainability of the code.

3. Method Optimization

Although we have encapsulated the jump method, it is not perfect and still has some defects. For example, if the target page needs to pass multiple parameters, we need to manually splice the parameters, which is more troublesome. In order to solve this problem, we can optimize the packaging method.

1. Pass the parameters into an object:

// index.vue

export default {
  methods: {
    goDetail() {
      navigateTo('/pages/detail/detail', {
        id: 123,
        name: 'uniapp封装跳转方法'
      });
    }
  }
}

2. Modify the navigateTo method, use JSON.stringify() to convert the parameter object into a json string, and Encode it and pass it to the target page as the value of the query string:

// util.js

export function navigateTo(url, data = {}) {
  uni.navigateTo({
    url: `${url}?data=${encodeURIComponent(JSON.stringify(data))}`
  });
}

3. After the target page obtains the parameters, use JSON.parse() to convert them into js objects:

// detail.vue

export default {
  onLoad(options) {
    this.queryParams = JSON.parse(decodeURIComponent(options.data));
  }
}

So far, we have optimized the jump method to pass multiple parameters quickly and conveniently.

In short, encapsulating the jump method can not only improve the readability and maintainability of the code, but also further simplify the writing of the code. I hope this article can help you learn and use uniapp better.

The above is the detailed content of How to encapsulate jump method in uniapp. For more information, please follow other related articles on the PHP Chinese website!