uniapp中路由的基本使用方法、参数传递方式以及路由拦截与权限控制

一、概述

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

二、uniapp路由的基本使用

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

1.uni.navigateTo:用于打开新页面,并保留当前页面。适用于普通的页面跳转。

示例代码:

css 复制代码
uni.navigateTo({
 url: '/pages/detail/detail?id=1'
});

2.uni.redirectTo:用于关闭当前页面,并打开新页面。适用于不需要返回上一页的页面跳转。

示例代码:

css 复制代码
uni.redirectTo({
 url: '/pages/home/home'
});

3.uni.reLaunch:关闭所有页面,打开到应用内的某个页面。适用于从其他平台扫码进入小程序的场景。

示例代码:

css 复制代码
uni.reLaunch({
 url: '/pages/login/login'
});

4.uni.switchTab:跳转到tarBar页面,并关闭其他所有非tarBar页面。适用于底部导航栏页面之间的跳转。

示例代码:

css 复制代码
uni.switchTab({
 url: '/pages/home/home'
});

三、uniapp路由参数的传递

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

1.页面之间传递参数在页面A跳转到页面B时,可以通过URL参数来传递数据。在A页面的跳转代码中,通过拼接url的方式传递参数:

css 复制代码
uni.navigateTo({
 url: '/pages/detail/detail?id=' + id
});

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

css 复制代码
onLoad() {
    console.log(this.$route.query.id);
}

页面返回时传递参数

在uniapp中,可以通过uni.navigateBack方法返回上一个页面,并通过调用上一页页面的onBack方法传递参数。具体代码如下:

3.在A页面中,跳转到B页面时,传递参数,并注册上一页页面的onBack方法:

css 复制代码
uni.navigateTo({
 url: '/pages/detail/detail?id=' + id + '&callback=onBack'
});

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

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

5.在A页面中,注册onBack方法并接收参数:

css 复制代码
methods: {
    onBack(data) {
        console.log(data);
    }
}

四、uniapp路由拦截与权限控制

在开发过程中,有时候需要对某些页面进行权限控制,以阻止未登录用户访问某些页面。

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

1.创建全局路由拦截器,在main.js文件中:

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

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

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

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

总结:

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

相关推荐
上趣工作室1 小时前
微信小程序开发1------微信小程序中的消息提示框总结
微信小程序·小程序
亿坊电商2 小时前
PHP框架在微服务迁移中能发挥什么作用?
开发语言·微服务·php
三天不学习2 小时前
微信小程序蓝牙连接打印机打印单据完整Demo【蓝牙小票打印】
微信小程序·小程序·蓝牙打印
帅云毅3 小时前
Web漏洞--XSS之订单系统和Shell箱子
前端·笔记·web安全·php·xss
keep intensify3 小时前
Linux常用指令
linux·服务器·php
ALex_zry5 小时前
Docker Macvlan网络配置实战:解决“network already exists“错误
网络·docker·php
布尼卡6 小时前
mac brew 无法找到php7.2 如何安装php7.2
php·mac
ALe要立志成为web糕手6 小时前
[BJDCTF2020]EzPHP
web安全·网络安全·php·ctf
农民也会写代码8 小时前
dedecms织梦arclist标签noflag属性过滤多个参数
开发语言·数据库·sql·php·dedecms
Zhuai-行淮10 小时前
施磊老师基于muduo网络库的集群聊天服务器(七)
服务器·网络·php