首页 > 文章 > 前端

uniapp中路由的使用技巧

时间：2023-12-17 15:51:53 212浏览收藏

IT行业相对于一般传统行业，发展更新速度更快，一旦停止了学习，很快就会被行业所淘汰。所以我们需要踏踏实实的不断学习，精进自己的技术，尤其是初学者。今天golang学习网给大家整理了《uniapp中路由的使用技巧》，聊聊，我们一起来看看吧！

uniapp中路由的使用技巧

一、概述
在uniapp开发中，路由是非常重要的一个方面，它可以实现页面之间的跳转和传递参数。本文将介绍uniapp中路由的使用技巧，并给出具体的代码示例。

二、uniapp路由的基本使用
在uniapp中，路由的基本使用可以通过uni.navigateTo、uni.redirectTo、uni.reLaunch、uni.switchTab等API来进行页面跳转。这些API的使用场景略有不同，具体使用取决于项目需求。

uni.navigateTo：用于打开新页面，并保留当前页面。适用于普通的页面跳转。
示例代码：
```
uni.navigateTo({
 url: '/pages/detail/detail?id=1'
});
```
uni.redirectTo：用于关闭当前页面，并打开新页面。适用于不需要返回上一页的页面跳转。
示例代码：
```
uni.redirectTo({
 url: '/pages/home/home'
});
```
uni.reLaunch：关闭所有页面，打开到应用内的某个页面。适用于从其他平台扫码进入小程序的场景。
示例代码：
```
uni.reLaunch({
 url: '/pages/login/login'
});
```
uni.switchTab：跳转到tarBar页面，并关闭其他所有非tarBar页面。适用于底部导航栏页面之间的跳转。
示例代码：
```
uni.switchTab({
 url: '/pages/home/home'
});
```

三、uniapp路由参数的传递
在uniapp中，可以通过URL参数的方式来进行页面之间的数据传递。

页面之间传递参数
在页面A跳转到页面B时，可以通过URL参数来传递数据。在A页面的跳转代码中，通过拼接url的方式传递参数：
```
uni.navigateTo({
 url: '/pages/detail/detail?id=' + id
});
```

在B页面中，可以通过uni.$route.query来获取参数值：

onLoad() {
    console.log(this.$route.query.id);
}

页面返回时传递参数
在uniapp中，可以通过uni.navigateBack方法返回上一个页面，并通过调用上一页页面的onBack方法传递参数。具体代码如下：
在A页面中，跳转到B页面时，传递参数，并注册上一页页面的onBack方法：
```
uni.navigateTo({
 url: '/pages/detail/detail?id=' + id + '&callback=onBack'
});
```

在B页面中，获取参数值，并在页面返回时调用上一页页面的onBack方法传递参数：

methods: {
    goBack() {
        uni.navigateBack({
            delta: 1,
            success: () => {
                uni.getOpenerEventChannel().emit(this.asr_notify);
            }
        });
    }
}

在A页面中，注册onBack方法并接收参数：

methods: {
    onBack(data) {
        console.log(data);
    }
}

四、uniapp路由拦截与权限控制
在开发过程中，有时候需要对某些页面进行权限控制，以阻止未登录用户访问某些页面。

在uniapp中，可以通过导航守卫来实现路由拦截和权限控制。具体代码如下：

创建全局路由拦截器，在main.js文件中：

// 全局路由拦截器
router.beforeEach((to, from, next) => {
 const token = uni.getStorageSync('token');
 if (to.meta.requiresAuth && !token) { // 判断是否需要登录才能查看页面
     next('/pages/login/login');
 } else {
     next();
 }
});

在需要进行权限控制的页面配置路由元信息：

export default {
 meta: {
     requiresAuth: true // 需要登录才能访问
 }
 // 省略其他代码...
}

通过以上操作，可以实现对需要登录才能访问的页面进行权限控制，未登录用户将被拦截并跳转到登录页。

总结：
本文介绍了uniapp中路由的基本使用方法、参数传递方式以及路由拦截与权限控制。通过合理的使用路由，可以实现页面之间的跳转和数据传递，提升应用的用户体验。

希望本文对您对于uniapp路由的使用有所帮助。

好了，本文到此结束，带大家了解了《uniapp中路由的使用技巧》，希望本文对你有所帮助！关注golang学习网公众号，给大家分享更多文章知识！

路由技巧 UniApp