我的书签
添加书签
移除书签Router 构建选项
routes
Array<RouteConfig>是全端RouteConfig的类型定义：interface RouteConfig = { path: string, //pages.json中的path 必须加上 '/' 开头 component?: Component, //H5端可用 name?: string, // 命名路由 components?: { [name: string]: Component }, // 命名视图组件，H5端可用 redirect?: string | Location | Function, //H5端可用 props?: boolean | Object | Function, //H5端可用 aliasPath?:string, //h5端 设置一个别名路径来替换 uni-app的默认路径 alias?: string | Array<string>, //H5端可用 children?: Array<RouteConfig>, // 嵌套路由，H5端可用 beforeEnter?: (to: Route, from: Route, next: Function) => void, //路由元守卫 meta?: any, //其他格外参数}
APP
Object否appholdTabbar:true, //是否开启底部菜单拦截 rewriteFun:true, //是否对uni-app 下的chooseLocation/openLocation 两个方法重写 目的是隐藏和显示拦截tabbar loddingPageStyle:()=>JSON.parse('{"backgroundColor":"#FFF"}'), //当前等待页面的样式 必须返回一个json loddingPageHook:()=>{plus.navigator.closeSplashscreen()}, //刚刚打开页面处于等待状态,会触发此事件 holdTabbarStyle:()=>JSON.parse('{}'), animation:{animationType:'pop-in',animationDuration:300}, //页面切换动画 switchPageOutTime:1000, //最高能忍耐的页面切换时间 达到此时间 不管切换有没有完成都会显示页面出来 这对启动页帮助很大
h5
Object否H5rewriteFun:true, //是否对uni-app reLaunch/navigateBack 两个方法重写 处理uni刷新直接返回到首页和触发路由守卫 paramsToQuery:false, //h5端通过params传参 刷新会丢失 开启此开关将变成?连接的方式 loading:true, //是否显示加载动画 vueRouterDev:false, //完全使用采用vue-router的开发模式 useUniConfig:true, //是否采用在pages.json下的所有页面配置信息 keepUniIntercept:false, //保留uni-app使用vue-router的拦截器 vueNext:false, //在next管道函数中是否获取vueRouter next的原本参数 replaceStyle:false, //是否对resetStyle函数中返回的style节点进行全部替换，否则为追加 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
函数签名：
全局守卫，你可以在里面做一些你想要router.beforeEach((to, from, next) => { /* 必须调用 `next` */})router.afterEach((to, from) => {})
干的事情。我可管不着！router.push
router.replace
router.replaceAll
router.pushTab
router.back
函数签名：router.push({name:'tab1'})router.replace({name:'tab1'})router.replaceAll({name:'tab1'})router.pushTab({name:'tab1'})router.back(2)
URL。参考 编程式导航router._pushTo
router._H5PushTo
函数签名：
慎用router._pushTo({ toRule:{ url:'/pages/tabbar/tabbar-1/tabbar-1', query:'name=hhyang&ages=22' }, ags:{ rule:{ NAVTYPE:'push' } }})//你甚至还可以这样router._pushTo({ toRule:{ url:'/pages/tabbar/tabbar-1/tabbar-1', query:'query=%257B%2522userId%2522%253A%2522123%2522%257D' }, ags:{ rule:{ NAVTYPE:'push' } }})router._H5PushTo('push',{ query:{ name:'hhyang' }})
router自己调用的api。可能后面会把他们去除掉！慎用！！router.getPageRoute
函数签名：
慎用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- 导航守卫的参数：
router.beforeEach((to, from, next) => { // `to` 和 `from` 都是路由对象})router.afterEach((to, from) => { // `to` 和 `from` 都是路由对象})
H5的scrollBehavior方法的参数:const router = new VueRouter({ scrollBehavior(to, from, savedPosition) { // `to` 和 `from` 都是路由对象 }})
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文档查看更多信息组件注入
注入的属性
router配置传入 router 实例，下面这些属性成员会被注入到每个子组件。- this.$Router router 实例。
- this.$Route
当前激活的路由信息对象。
完全使用vue-router开发时的API
vueRouterDev:true时。这时的路由将会完全变成vue-router的模式，任何vue-router相关的API都可以使用。移步到这里查看API
