路由配置

路由配置文件位于根目录下的的 pages.json，一个简单的路由文件格式如下：

  1. {
  2.   "pages": [
  3.     { "path": "pages/index" },
  4.     { "path": "pages/index/index" },
  5.     { "path": "pages/index/test" }
  6.   ],
  7.   "subPackages": [{
  8.     "root": "pages/ask",
  9.     "pages": [{ "path": "index" }]
  10.   }],
  11.   "globalStyle": {
  12.     "navigationBarTextStyle": "black",
  13.     "navigationBarTitleText": "uni-app",
  14.     "navigationBarBackgroundColor": "#F8F8F8",
  15.     "backgroundColor": "#F8F8F8"
  16.   }
  17. }

其中，pages指定了主包的页面配置，接收一个对象数组，数组中第一项表示应用启动页，每一个对象结构如下：

  1. {
  2.   "path": "pages/login/login",
  3.   "style": {
  4.     "navigationBarTitleText": "登录",
  5.     "enablePullDownRefresh": true
  6.   }
  7. }

style 节点用于设置每个页面的状态栏、导航条、标题、窗口背景色等，常用的选项包括：

  • navigationBarTitleText String 导航栏标题
  • navigationBarTextStyle String 导航栏标题颜色，仅支持 black/white
  • navigationBarBackgroundColor HexColor 导航栏背景颜色，如”#000000”
  • enablePullDownRefresh Boolean 允许下拉刷新
  • onReachBottomDistance Number 页面上拉触底事件触发时距页面底部距离，单位为px，默认50
  • backgroundTextStyle String 下拉 loading 的样式，仅支持 dark/light
  • backgroundColor HexColor 微信小程序 下拉窗口的背景色

详见：pages.json - pages - style

subPackages制定了分包的页面配置，其下root节点指定分包的根路径，pages配置与主包配置相同。

:::info 分包配置只在微信小程序生效，5+APP没有主包与分包的区别，始终为整包。 :::

路由跳转

官方提供以下 API 实现路由跳转：

  • uni.navigateTo({ url: '/pages/index/index' }) 路由到指定页面
  • uni.navigateBack({ delta: 2 }) 后退到指定数量的页面
  • uni.redirectTo({ url: '/pages/index/index' }) 重定向到指定页面
  • uni.reLaunch({ url: '/pages/index/index' }) 重新打开应用并跳转到指定页面
  • uni.switchTab({ url: '/pages/index/index' }) 跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面。

路由封装

为了方便使用，将路由做了一层封装：

library/router

  1. class Router {
  2.     constructor (path) {
  3.     this.basePath = path
  4.   }
  5.   // 前进
  6.   push (url) {
  7.     uni.navigateTo({ url: `${this.basePath}${url}` })
  8.   }
  9.   navigate (url) {
  10.     uni.navigateTo({ url: `${this.basePath}${url}` })
  11.   }
  12.   // 后退
  13.   pop (delta = 1) {
  14.     uni.navigateBack({ delta })
  15.   }
  16.   back (delta = 1) {
  17.     uni.navigateBack({ delta })
  18.   }
  19.   // 代替
  20.   replace (url) {
  21.     uni.redirectTo({ url: `${this.basePath}${url}` })
  22.   }
  23.   // 其他
  24.   reopen (url) {
  25.     uni.reLaunch({ url: `${this.basePath}${url}` })
  26.   }
  27.   switchTab (url) {
  28.     uni.switchTab({ url: `${this.basePath}${url}` })
  29.   }
  30. }
  32. export default new Router('/pages/')

main.js 中引入：

  1. ['axios', 'storage', 'router'].forEach(lib => {
  2.   Vue.prototype[`\$${lib}`] = require(`./library/${lib}`).default
  3. })

调用格式：

  1. this.$router.push('/index')
  2. this.$router.back()
  3. this.$router.back(2)

:::info 注意

在H5模式, $router 为只读属性, 不能赋值, 否则会报错：

  1. Uncaught TypeError: Cannot set property $router of #<Vue> which has only a getter

解决方案：可以改个名字再引入，或在H5的Vue组件中可以直接使用 this.$router :::

路由组件

路由组件使用 navigator：

  1. <navigator url="navigate/navigate?title=navigate" hover-class="navigator-hover">
  2.   <button type="default">跳转到新页面</button>
  3. </navigator>
  4. <navigator url="redirect/redirect?title=redirect" redirect hover-class="other-navigator-hover">
  5.   <button type="default">在当前页打开</button>
  6. </navigator>

参数：

  • url 为跳转路径
  • hover-class 为点击时样式

跳转方式包括：

  • navigate（默认）
  • redirect
  • switchTab
  • reLaunch
  • navigateBack

pages.json 详细配置

除了上面所述，配置路由之外，pages.json 还可以配置一些基本的页面信息。

globalStyle

用于设置应用的状态栏、导航条、标题、窗口背景色等。

  • navigationBarBackgroundColor HexColor 默认值 #000000，导航栏背景颜色
  • navigationBarTextStyle String 默认值 white，导航栏标题颜色，仅支持 black/white
  • navigationBarTitleText String 导航栏标题文字内容
  • navigationStyle String 默认值 default，导航栏样式，仅支持 default/custom。
  • backgroundColor HexColor 微信小程序 默认值 #ffffff，窗口的背景色

tabBar

如果应用是一个多 tab 应用，可以通过 tabBar 配置项指定 tab 栏的表现，以及 tab 切换时显示的对应页。

  • color HexColor 必填，tab 上的文字默认颜色
  • selectedColor HexColor 必填，tab 上的文字选中时的颜色
  • backgroundColor HexColor 必填，tab 的背景色
  • borderStyle String 选填，默认值 black，tabbar 上边框的颜色，仅支持 black/white
  • list Array 必填，tab 的列表，详见 list 属性说明，最少2个、最多5个 tab
  • position String 微信小程序 选填，默认值 bottom，可选值 bottom、top

其中 list 接收一个数组，数组中的每个项都是一个对象，其属性值如下：

  • pagePath String 必填，页面路径，必须在 pages 中先定义
  • text String 必填，tab 上按钮文字
  • iconPath String 选填，图片路径，icon 大小限制为40kb，建议尺寸为 81px * 81px，当 postion 为 top 时，此参数无效，不支持网络图片
  • selectedIconPath String 必填，选中时的图片路径，icon 大小限制为40kb，建议尺寸为 81px * 81px ，当 postion 为 top 时，此参数无效

:::info 注意：

  • 当设置 position 为 top 时，将不会显示 icon
  • tabBar 中的 list 是一个数组，只能配置最少2个、最多5个 tab，tab 按数组的顺序排序。 :::

condition

启动模式配置，仅开发期间生效，用于模拟直达页面的场景，如：小程序转发后，用户点击所打开的页面。

  • current Number 必填，当前激活的模式，list节点的索引值
  • list Array 必填，启动模式列表

list说明：

  • name String 必填，启动模式名称
  • path String 必填，启动页面路径
  • query String 选填，启动参数，可在页面的 onLoad 函数里获得

示例：

  1. {
  2.   "condition": { //模式配置，仅开发期间生效
  3.     "current": 0, //当前激活的模式（list 的索引项）
  4.     "list": [{
  5.         "name": "swiper", //模式名称
  6.         "path": "pages/component/swiper/swiper", //启动页面，必选
  7.         "query": "interval=4000&autoplay=false" //启动参数，在页面的onLoad函数里面得到。
  8.       },
  9.       {
  10.         "name": "test",
  11.         "path": "pages/component/switch/switch"
  12.       }
  13.     ]
  14.   }
  15. }

preloadRule

分包预载配置(仅在微信小程序里生效)，preloadRule 中，key 是页面路径，value 是进入此页面的预下载配置，每个配置有以下几项：

  • packages StringArray 必填，进入页面后预下载分包的 root 或 name。APP 表示主包
  • network String 选填，默认 wifi，在指定网络下预下载，可选值为：all（不限网络）、wifi（仅wifi下预下载）

uni-simple-router

有个大神写了一个 uni-simple-router 插件, 通过类似于 vue-router 的方式进行路由管理, 可以看看

参考资料