位置:电子教程 > Uni-app入门教程 (如果看不到内容请使用360浏览器) 推荐学习资源
uni-app概要
通过 HBuilderX 可视化界面
通过 HBuilderX发布为小程序
通过vue-cli命令行运行uni app项目
框架简介
使用Vue.js注意事项
uni-app 常见问题
当前阅读教程:Uni-app入门教程 > uni-app 页面路由
阅读(22555525)      收藏       赞(5685)      分享
上一篇: uni-app 页面生命周期 下一篇: uni-app 运行环境判断

路由

uni-app页面路由为框架统一管理,开发者需要在pages.json里配置每个路由页面的路径及页面样式。类似小程序在app.json中配置页面路由一样。所以 uni-app 的路由用法与 Vue Router 不同,如仍希望采用 Vue Router 方式管理路由,可在插件市场搜索 Vue-Router

路由跳转

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

页面栈

框架以栈的形式管理当前所有页面, 当发生路由切换的时候,页面栈的表现如下:

路由方式

页面栈表现

触发时机

初始化

新页面入栈

uni-app 打开的第一个页面

打开新页面

新页面入栈

调用 API  uni.navigateTo  

使用组件  <navigator   open-type="navigate"/>

页面重定向

当前页面出栈

新页面入栈

调用 API  uni.redirectTo  

使用组件  <navigator   open-type="redirectTo"/>

页面返回

页面不断出栈

直到目标返回页

调用 API  uni.navigateBack  

使用组件  <navigator   open-type="navigateBack"/> 

用户按左上角返回按钮、安卓用户点击物理back按键

Tab 切换

页面全部出栈

只留下新的 Tab 页面

调用 API   uni.switchTab   

使用组件  <navigator   open-type="switchTab"/> 

用户切换    Tab

重加载

页面全部出栈

只留下新的页面

调用 API   uni.reLaunch   

使用组件   <navigator   open-type="reLaunch"/>

 


上一篇: uni-app 页面生命周期 下一篇: uni-app 运行环境判断
计算机毕业设计作品网      毕业设计文档网      小程序教程网       毕业设计资料网  |         毕业设计定制QQ:45157718(微信同号)(备注:毕设)