类似小程序在

uni-app页面路由为框架统一管理开发者需要在pages.json里配置每个路由页面的路径及页面样式。

类似小程序在

Object类型用于配置页面窗口表现配置项参考uniapp中pageStyleneedLoginBoolean类型

pages.json文件中

新建页面的名称新建页面的文件类型是vue文件还是nvue文件还是两者都有是否创建同名然后里面再放新建的页面文件新建页面的文件位置

一般情况下不会动这里除非你一开始点新建页面的时候点错父级文件夹了选择模板有很多个模板可以通过点击5的选择模板区域右侧预览模板从而选择自己需要的合适模板。

如果这里面都没有你想要的模板你还可以点击8左侧去插件市场选择模板当然可以点击8右侧自定义模板是否要在pages.json中注册默认是注册的但如果你新建的页面是个组件的话这里可以取消创建点击按钮就会按照你选择的条件新建一个页面。

2、路由跳转

有两种页面路由跳转方式使用navigator组件跳转、调用API跳转。

tips:

不会自动关闭。

页面关闭时只是销毁了页面实例未完成的网络请求、计时器等副作用需开发者自行处理。

2.1

urlString类型表示应用内的跳转链接值为相对路径或绝对路径如../first/first/pages/first/first

注意不能加

后缀open-typeString类型默认navigate表示跳转方式

open-type

时有效表示回退的层数animation-typeString类型默认pop-in/out当

open-type

时有效窗口的显示/关闭动画效果详见窗口动画animation-durationNumber类型默认300当

open-type

时有效窗口显示/关闭动画的持续时间。

hover-classString类型默认navigator-hover用于指定点击时的样式类当hover-classnone时没有点击态效果hover-stop-propagationBoolean类型默认false指定是否阻止本节点的祖先节点出现点击态hover-start-timeNumber类型默认50

表示按住后多久出现点击态单位毫秒hover-stay-timeNumber类型默认600表示手指松开后点击态保留时间单位毫秒targetString类型默认是self表示

在哪个小程序目标上发生跳转默认当前小程序值域self/miniProgram

2.1.2

urlnavigate/navigate?titlenavigate

hover-classnavigator-hoverbutton

typedefault跳转到新页面/button/navigatornavigator

urlredirect/redirect?titleredirect

open-typeredirect

hover-classother-navigator-hoverbutton

typedefault在当前页打开/button/navigatornavigator

open-typeswitchTab

hover-classother-navigator-hoverbutton

typedefault跳转tab页面/button/navigator/view/view/view

/template

//option为object类型会序列化上个页面传递的参数console.log(option.id);

//打印出上个页面传递的参数。

console.log(option.name);

/scripturl有长度限制太长的字符串会传递失败可使用窗体通信、全局变量或encodeURIComponent等多种方式解决如下为encodeURIComponent示例。

navigator

:url/pages/navigate/navigate?item

encodeURIComponent(JSON.stringify(item))/navigator//

navigate.vue页面接受参数

JSON.parse(decodeURIComponent(option.item));

}2.1.3

跳转tabbar页面必须设置open-typeswitchTabnavigator-hover

默认为

的子节点背景色应为透明色。

navigator-open-type属性

如果使用对应的值则对应值的功能会高于对应跳转路径。

app-nvue

navigator。

非render为native的情况下nvue暂不支持navigator组件请使用API跳转。

app下退出应用Android平台可以使用plus.runtime.quit。

iOS没有退出应用的概念。

uLink组件是navigator组件的增强版样式上自带下划线功能上支持打开在线网页、其他App的schema、mailto发邮件、tel打电话。

Vue3

项目因

保留当前页面跳转到应用内的某个页面使用uni.navigateBack可以返回到原页面。

OBJECT参数

路径后可以带参数。

参数与路径之间使用?分隔参数键与参数值用相连不同参数用分隔如

‘path?keyvaluekey2value2’path为下一个页面的路径下一个页面的onLoad函数可得到传递的参数animationTypeString类型不必填默认pop-in是窗口显示的动画效果详见窗口动画animationDurationNumber类型不必填默认300是窗口动画持续时间单位为

页面间通信接口用于监听被打开页面发送到当前页面的数据。

successFunction类型不必填是接口调用成功的回调函数failFunction类型不必填是接口调用失败的回调函数completeFunction类型不必填是接口调用结束的回调函数调用成功、失败都会执行

object.success

//option为object类型会序列化上个页面传递的参数console.log(option.id);

//打印出上个页面传递的参数。

console.log(option.name);

}//

在起始页面跳转到test.vue页面并监听test.vue发送过来的事件数据

uni.navigateTo({url:

为指定事件添加一个监听器获取被打开页面传送到当前页面的数据acceptDataFromOpenedPage:

function(data)

{console.log(data)}...},success:

function(res)

通过eventChannel向被打开页面传送数据res.eventChannel.emit(acceptDataFromOpenerPage,

data:

this.getOpenerEventChannel();eventChannel.emit(acceptDataFromOpenedPage,

{data:

page});eventChannel.emit(someEvent,

{data:

监听acceptDataFromOpenerPage事件获取上一页面通过eventChannel传送到当前页面的数据eventChannel.on(acceptDataFromOpenerPage,

function(data)

}url有长度限制太长的字符串会传递失败可改用窗体通信、全局变量另外参数中出现空格等特殊字符时需要对参数进行编码如下为使用encodeURIComponent对参数进行编码的示例。

navigator

encodeURIComponent(JSON.stringify(item))/navigator//

在test.vue页面接受参数

JSON.parse(decodeURIComponent(option.item));

}注意

跳转路由API的目标页面必须是在pages.json里注册的vue页面。

如果想打开web

plus.runtime.openURL或web-view组件H5平台使用

window.open小程序平台使用web-view组件url需在小程序的联网白名单中。

在hello

uni-app中有个组件ulink.vue已对多端进行封装可参考。

2.2.2

的页面的路径路径后可以带参数。

参数与路径之间使用?分隔参数键与参数值用相连不同参数用分隔如

path?keyvaluekey2value2successFunction类型不必填是接口调用成功的回调函数failFunction类型不必填是接口调用失败的回调函数completeFunction类型不必填是

代码示例

路径后可以带参数。

参数与路径之间使用?分隔参数键与参数值用相连不同参数用分隔如

path?keyvaluekey2value2如果跳转的页面路径是

tabBar

页面则不能带参数successFunction类型不必填是接口调用成功的回调函数failFunction类型不必填是接口调用失败的回调函数completeFunction类型不必填是

uni.reLaunch({url:

H5端调用uni.reLaunch之后之前页面栈会销毁但是无法清空浏览器之前的历史记录此时navigateBack不能返回如果存在历史记录的话点击浏览器的返回按钮或者调用history.back()仍然可以导航到浏览器的其他历史记录。

2.2.4

字段定义的页面路径后不能带参数successFunction类型不必填是接口调用成功的回调函数failFunction类型不必填是接口调用失败的回调函数completeFunction类型不必填是

代码示例

大于现有页面数则返回到首页。

animationTypeString类型不必填默认pop-out是窗口关闭的动画效果详见窗口动画animationDurationNumber类型不必填默认300是窗口关闭动画的持续时间单位为

mssuccessFunction类型不必填是接口调用成功的回调函数failFunction类型不必填是接口调用失败的回调函数completeFunction类型不必填是

代码示例

之前进行页面跳转。

H5端页面刷新之后页面栈会消失此时navigateBack不能返回如果一定要返回可以使用history.back()导航到浏览器的其他历史记录。

2.2.6

取消监听一个事件。

给出第二个参数时只取消给出的监听函数否则取消所有监听函数

string

序号字形描述1【栈】表示栈的那个管道2→栈】表示入栈3栈】→表示出栈