Home >Web Front-end >uni-app >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
// 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); }
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.
2. Use the encapsulated jump 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'); // 跳转到个人中心页面 } } } }
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.
// index.vue export default { methods: { goDetail() { navigateTo('/pages/detail/detail', { id: 123, name: 'uniapp封装跳转方法' }); } } }
// util.js export function navigateTo(url, data = {}) { uni.navigateTo({ url: `${url}?data=${encodeURIComponent(JSON.stringify(data))}` }); }
// 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!