文章目录
????前言
在实际应用开发中我们经常要使用到路由跳转,在uniapp官网中,提供了navigator内置组件,供我们使用。官网地址:navigator页面跳转。
????正文
1、看官网
1.1 navigator API 介绍
页面跳转。
该组件类似HTML中的<a>
组件,但只能跳转本地页面。目标页面必须在pages.json中注册。
该组件的功能有API方式,另见:https://uniapp.dcloud.io/api/router?id=navigateto
属性说明
属性名 | 类型 | 默认值 | 说明 | 平台差异说明 |
---|---|---|---|---|
url | String | 应用内的跳转链接,值为相对路径或绝对路径,如:“…/first/first”,“/pages/first/first”,注意不能加 .vue 后缀 |
||
open-type | String | navigate | 跳转方式 | |
delta | Number | 当 open-type 为 ‘navigateBack’ 时有效,表示回退的层数 | ||
animation-type | String | pop-in/out | 当 open-type 为 navigate、navigateBack 时有效,窗口的显示/关闭动画效果,详见:窗口动画 | App |
animation-duration | Number | 300 | 当 open-type 为 navigate、navigateBack 时有效,窗口显示/关闭动画的持续时间。 | App |
hover-class | String | navigator-hover | 指定点击时的样式类,当hover-class="none"时,没有点击态效果 | |
hover-stop-propagation | Boolean | false | 指定是否阻止本节点的祖先节点出现点击态 | 微信小程序 |
hover-start-time | Number | 50 | 按住后多久出现点击态,单位毫秒 | |
hover-stay-time | Number | 600 | 手指松开后点击态保留时间,单位毫秒 | |
target | String | self | 在哪个小程序目标上发生跳转,默认当前小程序,值域self/miniProgram | 微信2.0.7+、百度2.5.2+、QQ |
open-type 有效值
值 | 说明 | 平台差异说明 |
---|---|---|
navigate | 对应 uni.navigateTo 的功能 | |
redirect | 对应 uni.redirectTo 的功能 | |
switchTab | 对应 uni.switchTab 的功能 | |
reLaunch | 对应 uni.reLaunch 的功能 | 字节跳动小程序与飞书小程序不支持 |
navigateBack | 对应 uni.navigateBack 的功能 | |
exit | 退出小程序,target="miniProgram"时生效 | 微信2.1.0+、百度2.5.2+、QQ1.4.7+ |
注意
- 跳转tabbar页面,必须设置open-type=“switchTab”
- navigator-hover 默认为 {background-color: rgba(0, 0, 0, 0.1); opacity: 0.7;},
<navigator>
的子节点背景色应为透明色。 - navigator-
open-type
属性 如果使用对应的值,则对应值的功能会高于对应跳转路径。 - app-nvue 平台只有纯nvue项目(render为native)才支持
<navigator>
。非render为native的情况下,nvue暂不支持navigator组件,请使用API跳转。 - app下退出应用,Android平台可以使用plus.runtime.quit。iOS没有退出应用的概念。
- uLink组件是navigator组件的增强版,样式上自带下划线,功能上支持打开在线网页、其他App的schema、mailto发邮件、tel打电话。
1.2、路由跳转参数传递
url有长度限制,太长的字符串会传递失败,可使用窗体通信、全局变量,或encodeURIComponent等多种方式解决,如下为encodeURIComponent示例。
<navigator :url="'/pages/navigate/navigate?item='+ encodeURIComponent(JSON.stringify(item))"></navigator>
// navigate.vue页面接受参数
onLoad: function (option) {
const item = JSON.parse(decodeURIComponent(option.item));
}
1.3、五种常见的跳转方式
以下只做简单的介绍,详细说明和案例可移步:官方文档
1.3.1 uni.navigateTo(OBJECT)
保留当前页面,跳转到应用内的某个页面,使用
uni.navigateBack
可以返回到原页面。
注: 因为我们今天封装路由跳转主要使用的是navigateTo,所以我将官方的文档复制了过来可以看下详细的参数介绍。
OBJECT参数说明
参数 | 类型 | 必填 | 默认值 | 说明 | 平台差异说明 |
---|---|---|---|---|---|
url | String | 是 | 需要跳转的应用内非 tabBar 的页面的路径 , 路径后可以带参数。参数与路径之间使用?分隔,参数键与参数值用=相连,不同参数用&分隔;如 ‘path?key=value&key2=value2’,path为下一个页面的路径,下一个页面的onLoad函数可得到传递的参数 | ||
animationType | String | 否 | pop-in | 窗口显示的动画效果,详见:窗口动画 | App |
animationDuration | Number | 否 | 300 | 窗口动画持续时间,单位为 ms | App |
events | Object | 否 | 页面间通信接口,用于监听被打开页面发送到当前页面的数据。2.8.9+ 开始支持。 | ||
success | Function | 否 | 接口调用成功的回调函数 | ||
fail | Function | 否 | 接口调用失败的回调函数 | ||
complete | Function | 否 | 接口调用结束的回调函数(调用成功、失败都会执行) |
object.success 回调函数
参数
Object res
属性 | 类型 | 说明 |
---|---|---|
eventChannel | EventChannel | 和被打开页面进行通信 |
示例
//在起始页面跳转到test.vue页面并传递参数
uni.navigateTo({
url: 'test?id=1&name=uniapp'
});
// 在test.vue页面接受参数
export default {
onLoad: function (option) { //option为object类型,会序列化上个页面传递的参数
console.log(option.id); //打印出上个页面传递的参数。
console.log(option.name); //打印出上个页面传递的参数。
}
}
// 在起始页面跳转到test.vue页面,并监听test.vue发送过来的事件数据
uni.navigateTo({
url: 'pages/test?id=1',
events: {
// 为指定事件添加一个监听器,获取被打开页面传送到当前页面的数据
acceptDataFromOpenedPage: function(data) {
console.log(data)
},
someEvent: function(data) {
console.log(data)
}
...
},
success: function(res) {
// 通过eventChannel向被打开页面传送数据
res.eventChannel.emit('acceptDataFromOpenerPage', { data: 'data from starter page' })
}
})
// 在test.vue页面,向起始页通过事件传递数据
onLoad: function(option) {
const eventChannel = this.getOpenerEventChannel();
eventChannel.emit('acceptDataFromOpenedPage', {data: 'data from test page'});
eventChannel.emit('someEvent', {data: 'data from test page for someEvent'});
// 监听acceptDataFromOpenerPage事件,获取上一页面通过eventChannel传送到当前页面的数据
eventChannel.on('acceptDataFromOpenerPage', function(data) {
console.log(data)
})
}
url有长度限制,太长的字符串会传递失败,可改用窗体通信、全局变量,另外参数中出现空格等特殊字符时需要对参数进行编码,如下为使用encodeURIComponent
对参数进行编码的示例。
<navigator :url="'/pages/test/test?item='+ encodeURIComponent(JSON.stringify(item))"></navigator>
// 在test.vue页面接受参数
onLoad: function (option) {
const item = JSON.parse(decodeURIComponent(option.item));
}
注意:
- 页面跳转路径有层级限制,不能无限制跳转新页面
- 跳转到 tabBar 页面只能使用 switchTab 跳转
- 路由API的目标页面必须是在pages.json里注册的vue页面。如果想打开web url,在App平台可以使用 plus.runtime.openURL或web-view组件;H5平台使用 window.open;小程序平台使用web-view组件(url需在小程序的联网白名单中)。在hello uni-app中有个组件ulink.vue已对多端进行封装,可参考。
1.3.2 uni.redirectTo(OBJECT)
关闭当前页面,跳转到应用内的某个页面。
1.3.3 uni.reLaunch(OBJECT)
关闭所有页面,打开到应用内的某个页面。
1.3.4 uni.switchTab(OBJECT)
跳转到 tabBar 页面,并关闭其他所有非 tabBar 页面。
1.3.5 uni.navigateBack(OBJECT)
关闭当前页面,返回上一页面或多级页面。可通过 getCurrentPages() 获取当前的页面栈,决定需要返回几层。默认值为1。
2、路由跳转传参简易封装
2.1、首先列举一下需要考虑的参数
-
URL
:目标地址 -
params
:有没有携带参数跳转 -
openType
:跳转方式(文档里名字为open-type
) -
animation-type
:当open-type
为navigate
、navigateBack
时有效,窗口的显示/关闭动画效果。 -
animation-duration
:窗口显示/关闭动画的持续时间。
2.2、封装代码
本示例代码封装在
mina.js 文件
:
// openType 默认值为 navigate;animationType 默认值为pop-in;animationDuration 默认值为300毫秒
Vue.prototype.goByPath = function(path, params, openType = 'navigate', animationType = 'pop-in', animationDuration =
300) {
// 有参数执行这里的逻辑
if(params !==undefined && params !== null){
if (openType == 'navigate') {
// 如果跳转方式为navigate,则使用navigateTo方式跳转,保留当前页面,跳转到应用内的某个页面
uni.navigateTo({
url: path + "?params=" + encodeURIComponent(JSON.stringify(params)),
animationType: animationType,
animationDuration: animationDuration
})
} else {
// 如果跳转方式不为navigate,则使用redirectTo方式跳转,关闭当前页面,跳转到应用内的某个页面
uni.redirectTo({
url: path + "?params=" + encodeURIComponent(JSON.stringify(params)),
animationType: animationType,
animationDuration: animationDuration
})
}
}else{
// 没有参数直接使用navigateTo方式跳转,保留当前页面,跳转到应用内的某个页面
uni.navigateTo({
url: path,
animationType: animationType,
animationDuration: animationDuration
})
}
}
// 返回上一页
Vue.prototype.goBack = function() {
uni.navigateBack({
delta: 1
});
}
encodeURIComponent
是对参数进行编码,因为url有长度限制,太长的字符串会传递失败。
在获取参数的页面,再使用decodeURIComponent
进行解码即可。
3、案例演示
封装好了我们就来试试好不好使。
介绍一下我的案例:点击轮播图,跳转值轮播图的详情页(index.vue),携带图片和标题两个参数,并渲染在详情页面(detail.vue)。
index.vue文件:
这里只粘贴了部分轮播图组件代码,和所需要的数据。轮播图案例移步至:【uniapp小程序开发】—— 组件封装之【自定义轮播图】
<template>
<!-- 轮播图组件 -->
<view class="px-3 py-2 ">
<swiperDot class="position-relative" :current="current" :info="swipers">
<!--
swiper常用属性介绍:
indicator-dots:轮播图正前方的小圆点(此案例没有使用官方提供的,是自定义的在右下角附近)
autoplay:是否自动切换
interval:图片轮播间隔此处为3秒
duration:图片轮播动画时长 此处为0.5秒
circular:是否开启无缝轮播(此处为到第三张图片后无缝播放第一张图片)
-->
<swiper :autoplay="true" :interval="3000" :duration="500" circular style="height: 250rpx;"
@change="changeIndicatorDots">
<swiper-item v-for="(item,index) in swipers" :key="index" @click="goByPath('/pages/index/detail',{src:item.src,title:item.title})">
<image :src="item.src" mode="sapectFill" style="height:250rpx;width: 100%;" class="rounded-lg">
</image>
</swiper-item>
</swiper>
</swiperDot>
</view>
</template>
<script>
import swiperDot from '@/components/comon/swiper-doc.vue'
export default {
components: {
swiperDot
},
data() {
return {
current: 0, // 标识当前选中的图片序列号
swipers: [{
src: '/static/swiper/1.jpg',
title: '自定义轮播图组件图片一'
}, {
src: '/static/swiper/2.jpg',
title: '自定义轮播图组件图片二名字很长测试用'
}, {
src: '/static/swiper/3.jpg',
title: '自定义轮播图组件图片三'
}]
}
}
</script>
detail.vue文件
<template>
<view>
<view class="title">
{{title}}
</view>
<image :src="src" mode="sapectFill" style="height:250rpx;width: 100%;"></image>
<view>
<!-- 调用封装好的goBack方法返回上一页 -->
<button type="primary" @click="goBack">返回</button>
</view>
</view>
</template>
<script>
import swiperDot from '@/components/comon/swiper-doc.vue'
export default {
components: {
swiperDot
},
data() {
return {
src:'',
title:''
}
},
onLoad(option) {
// 打印传递过来的参数
console.log(option)
// decodeURIComponent将参数解码并使用JSON.parse() 方法用来解析JSON字符串转换为对象
this.src = JSON.parse(decodeURIComponent(option.params)).src;
this.title = JSON.parse(decodeURIComponent(option.params)).title;
}
}
</script>