Router 构建选项

routes

  • 类型: Array<RouteConfig>

  • 必填: 是

  • 平台：全端

RouteConfig 的类型定义：

  1. interface RouteConfig = {
  2.   path: string, //pages.json中的path 必须加上 '/' 开头
  3.   component?: Component,    //H5端可用
  4.   name?: string, // 命名路由    
  5.   components?: { [name: string]: Component }, // 命名视图组件，H5端可用   
  6.   redirect?: string | Location | Function,  //H5端可用
  7.   props?: boolean | Object | Function,  //H5端可用
  8.   aliasPath?:string,    //h5端 设置一个别名路径来替换 uni-app的默认路径
  9.   alias?: string | Array<string>,   //H5端可用
  10.   children?: Array<RouteConfig>, // 嵌套路由，H5端可用
  11.   beforeEnter?: (to: Route, from: Route, next: Function) => void,   //路由元守卫
  12.   meta?: any,   //其他格外参数
  13. }

APP

  • 类型: Object

  • 必填: 否

  • 平台：app

  1.     holdTabbar:true,    //是否开启底部菜单拦截
  2.     rewriteFun:true,    //是否对uni-app 下的chooseLocation/openLocation 两个方法重写 目的是隐藏和显示拦截tabbar
  3.     loddingPageStyle:()=>JSON.parse('{"backgroundColor":"#FFF"}'),    //当前等待页面的样式 必须返回一个json
  4.     loddingPageHook:()=>{plus.navigator.closeSplashscreen()},        //刚刚打开页面处于等待状态,会触发此事件
  5.     holdTabbarStyle:()=>JSON.parse('{}'),    
  6.     animation:{animationType:'pop-in',animationDuration:300},    //页面切换动画
  7.     switchPageOutTime:1000,    //最高能忍耐的页面切换时间 达到此时间 不管切换有没有完成都会显示页面出来 这对启动页帮助很大

h5

  • 类型: Object

  • 必填: 否

  • 平台：H5

  1.     rewriteFun:true,    //是否对uni-app reLaunch/navigateBack 两个方法重写 处理uni刷新直接返回到首页和触发路由守卫
  2.     paramsToQuery:false,    //h5端通过params传参 刷新会丢失 开启此开关将变成?连接的方式
  3.     loading:true,        //是否显示加载动画
  4.     vueRouterDev:false,    //完全使用采用vue-router的开发模式
  5.     useUniConfig:true,    //是否采用在pages.json下的所有页面配置信息
  6.     keepUniIntercept:false,   //保留uni-app使用vue-router的拦截器
  7.     vueNext:false,  //在next管道函数中是否获取vueRouter next的原本参数
  8.     replaceStyle:false, //是否对resetStyle函数中返回的style节点进行全部替换，否则为追加
  9.     resetStyle:()=>JSON.parse('{}'),  //自定义加载样式函数

目前你可以在这里设置一些常规的操作，后续应该能设置全部的 vue-router 配置

debugger

  • 类型: boolean

  • 必填: 否

  • 默认值:false

  • 平台：全端

在开发阶段可以设置为 true 进行日常的日志捕捉，用于调试开发。开启后将会在控制台统一输出路由的所有日志。

encodeURI

  • 类型: boolean

  • 必填: 否

  • 默认值:true

  • 平台：全端

对 url 传递的参数进行编码，更多学习可以 点击这里

routerBeforeEach

  • 类型: Function

  • 必填: 否

  • 默认值:() => void

  • 平台：全端

uni-simple-router 前置路由函数 每次触发跳转前先会触发此函数，你可以在这里面做写什么。可能有、动画、记录等等操作。

routerAfterEach

  • 类型: Function

  • 必填: 否

  • 默认值:() => void

  • 平台：全端

uni-simple-router 后置路由函数 每次触发跳转后会触发此函数，你可以在这里面做写什么。可能有、动画、记录等等操作。

Router 实例方法

router.beforeEach

router.afterEach

函数签名：

  1. router.beforeEach((to, from, next) => {
  2.   /* 必须调用 `next` */
  3. })
  5. router.afterEach((to, from) => {})

全局守卫，你可以在里面做一些你想要 干 的事情。我可管不着！

router.push

router.replace

router.replaceAll

router.pushTab

router.back

函数签名：

  1. router.push({name:'tab1'})
  2. router.replace({name:'tab1'})
  3. router.replaceAll({name:'tab1'})
  4. router.pushTab({name:'tab1'})
  5. router.back(2)

动态的导航到一个新 URL。参考 编程式导航

router._pushTo <return Promise>

router._H5PushTo

函数签名：

  1. router._pushTo({
  2.     toRule:{
  3.         url:'/pages/tabbar/tabbar-1/tabbar-1',
  4.         query:'name=hhyang&ages=22' 
  5.     },
  6.     ags:{
  7.         rule:{
  8.             NAVTYPE:'push'
  9.         }
  10.     }
  11. })
  12. //你甚至还可以这样
  13. router._pushTo({
  14.     toRule:{
  15.         url:'/pages/tabbar/tabbar-1/tabbar-1',
  16.         query:'query=%257B%2522userId%2522%253A%2522123%2522%257D' 
  17.     },
  18.     ags:{
  19.         rule:{
  20.             NAVTYPE:'push'
  21.         }
  22.     }
  23. })
  25. router._H5PushTo('push',{
  26.     query:{
  27.         name:'hhyang'
  28.     }
  29. })

慎用

其实你不应该使用这两个方法进行跳转。目前这两个方法是暴露给 router 自己调用的api。可能后面会把他们去除掉！慎用！！

router.getPageRoute

函数签名：

  1. router.getPageRoute(VueComponent);  //你应该传递一个当前 vue组件对象

慎用

其实你不应该使用这个方法进行获取路由元信息。目前这个方法也是暴露给 router 自己调用的api。你应该使用 this.$Route 取代它。

Router 实例 getter

$Route v1.4.8+

可以直接通过 router 实例获取到当前页面路由元信息

$holdTab v1.4.8+

可以直接通过 router 实例获取到底部tabbar拦截实例

路由元信息

一个 路由对象 (route object) 表示当前激活的路由的状态信息，包含了当前 URL 解析得到的信息，还有 URL 匹配到的 路由记录 (route records)。

路由对象是不可变 (immutable) 的，每次成功的导航后都会产生一个新的对象。

路由对象出现在多个地方:

  • 在组件内，即 this.$Route

  • 导航守卫的参数：

  1. router.beforeEach((to, from, next) => {
  2.   // `to` 和 `from` 都是路由对象
  3. })
  5. router.afterEach((to, from) => {
  6.   // `to` 和 `from` 都是路由对象
  7. })
  • 甚至在 H5 的 scrollBehavior 方法的参数:
  1. const router = new VueRouter({
  2.   scrollBehavior(to, from, savedPosition) {
  3.     // `to` 和 `from` 都是路由对象
  4.   }
  5. })

  • H5 的 $route 观察者回调内

  • H5 的 router.match(location) 的返回值

路由对象属性

  • $Route.path

    • 类型: string字符串，对应当前路由的路径，总是解析为绝对路径，如 "/pages/tabbar/tabbar-1/tabbar-1"。

  • $Route.params

    • 类型: Object一个 key/value 对象，包含了动态片段和全匹配片段，如果没有路由参数，就是一个空对象。目前非 完全使用vue-router开发 的模式下，此参数为保留参数。

  • $Route.query

    • 类型: Object一个 key/value 对象，表示 URL 查询参数。例如，对于路径 /foo?user=1，则有 $Route.query.user == 1，如果没有查询参数，则是个空对象。

更多路由对象属性，你可以在实例化路由对象时 routes 中传递更多的自定义信息。在非 完全使用vue-router开发、vueNext:true 的情况下都会带上匹配的所有参数。

当你使用 完全使用vue-router开发 的模式时，你可以访问vue-router文档查看更多信息simple-router 路由配置 - 图1

组件注入

注入的属性

通过在 Vue 根实例的 router 配置传入 router 实例，下面这些属性成员会被注入到每个子组件。

  • this.$Router

router 实例。

  • this.$Route

当前激活的路由信息对象。

完全使用vue-router开发时的API

当前你在路由配置中设置 vueRouterDev:true 时。这时的路由将会完全变成 vue-router 的模式，任何 vue-router 相关的API都可以使用。移步到这里查看APIsimple-router 路由配置 - 图2