如何在uniapp中封装跳转方法

1. 思路

在uniapp中封装跳转方法的思路是将所有页面跳转方法封装在一个js文件里面，通过导出模块，可以方便地在各个vue文件中引用。主要步骤如下：

在common目录下新建一个js文件，命名为router.js，该文件用于存放封装的路由跳转方法。

使用uniapp内置的路由跳转方法完成对应跳转，并传入对应参数。

利用ES6的模块化机制，将封装好的方法导出，便于其他vue文件引用。

2. 创建router.js文件

在common目录下新建router.js文件，代码如下：

// 传入需要的参数，跳转到对应页面
function navigateTo(url) {
    uni.navigateTo({
        url: url
    });
}
module.exports = {
    navigateTo: navigateTo
}

3. 引用封装的跳转方法

在需要使用该跳转方法的vue文件中，即可引用router.js中导出的方法navigateTo。

3.1 导入引用文件

在需要使用跳转方法的vue文件中，首先需要导入封装好的router.js文件。

import router from '@/common/router.js'

3.2 调用跳转方法

导入router.js文件之后即可直接调用其中的navigateTo方法完成页面跳转。以跳转到pages/index/index.vue为例，代码如下：

router.navigateTo('/pages/index/index')

4. 封装更多跳转方法

除了navigateTo方法，uniapp内置的还有其他跳转方法，例如redirectTo、reLaunch等。可以封装多种跳转方法来满足不同场景的需求。以redirectTo方法为例，代码如下：

// 传入需要的参数，重定向到对应页面
function redirectTo(url) {
    uni.redirectTo({
        url: url
    });
}
module.exports = {
    navigateTo: navigateTo,
    redirectTo: redirectTo
}

5. 总结

在uniapp中封装跳转方法能够提高开发效率，减少代码量，并且可以减少出错的可能。利用ES6的模块化机制，将封装好的方法导出，并在对应vue文件中引入即可。同时，可以根据不同场景的需求，封装多种不同的跳转方法。