是否你也曾感叹过为啥官方就不搞一个相似 Vue-router 同样的路由管理器?苦苦寻找。搜遍百度?社区?以及 Google?甚至是官方的各大 QQ 群?难受没找到!直到此插件出来以前也没有一个更好的解决方法。因而它,没错,就是它,它诞生了。只要你会使用 Vue-router 便可立刻上手,下面文档的彻底不用看。它保留了 Vue-router 彻底类似的书写风格,让你 倍感亲切 !vue
安装node
复制代码npm install uni-simple-router
若是在一个模块化工程中使用它,必需要经过 Vue.use() 明确地安装路由功能:git
复制代码import Vue from 'vue' import Router from 'uni-simple-router' Vue.use(Router)
组件式的导航 1.2.2+github
这是一个很难抉择的问题?加仍是不加这是一个问题!为了让开发者更快捷,最后仍是封装上了 router-link 组件。为了能知足多端这里必须批评下 微信小程序,它要搞特殊。没得办法的!因此无法帮大家注册组件。它那玩意只能在 main.js 中才能注册组件!!!! 很少说了,直接上代码。npm
注册组件:编程
复制代码// main.js import routerLink from './node_modules/uni-simple-router/component/router-link.vue' Vue.component('router-link',routerLink)
使用组件:小程序
复制代码// xxxx.vue <router-link to="{name: tabbar-4,params: {name: '我只想去tab5的router-link'}}" navType="pushTab"> <button type="primary">使用name对象跳转</button> </router-link> <router-link to="{path: '/pages/tabbar/tabbar-4/tabbar-4',query: {name: '我只想去tab5的router-link'}}" navType="pushTab"> <button type="primary">使用path对象跳转</button> </router-link> <router-link to="{path: '/tabbar-4/tabbar-4,query': {name: '我只想去tab5的router-link'}}" navType="pushTab" :level="2" :append="true"> <button type="primary">使用path对象继承父路径跳转</button> </router-link> <router-link to="/pages/tabbar/tabbar-4/tabbar-4" navType="pushTab"> <button type="warn">经过路由path直接跳转</button> </router-link> <router-link to="/tabbar-4/tabbar-4" navType="pushTab" :level="2" :append="true"> <button type="warn">经过路由path继承父路径跳转</button> </router-link> <router-link to="/tabbar-4/tabbar-4" navType="pushTab" :level="2" :append="true" :stopNavto="true"> <button type="default">阻止组件事件,不会跳转</button> </router-link>
参数 | 类型 | 必填 | 默认值 | 描述 |
---|---|---|---|---|
to | String | 是 | 须要跳转的路径。能够是字符串对象,也能够是一个绝对路径,也能够是一个相对路径 | |
stopNavto | Boolean | 否 | false | 默认绑定事件为点击事件,不阻止。 |
navType | String | 否 | push | 须要跳转的 NAVTYPE类型 |
level | Number | 否 | 1 | 相对于当前页面路径,以 / 从后往前裁切的层级。append 为true时生效 |
append | Boolean | 否 | false | 是否相对于当前页面路径跳转。根据 level 层级截取的路径 拼接 to 。 只针对使用path跳转的状况 |
编程式的导航微信小程序
废弃全部 uni-app 路由与页面跳转 Api,拥抱编程式导航。api
注意:在 Vue 实例内部,你能够经过 \$Router 访问路由实例。所以你能够调用 this.\$Router.push。浏览器
想要导航到不一样的 URL,则使用 this.\$Router.push 方法。这个方法会向 history 栈添加一个新的记录,因此,当用户点击后退按钮时,则回到以前的 URL。
该方法的参数能够是一个字符串路径,或者一个描述地址的对象。例如:
复制代码// 字符串 this.$Router.push('/pages/router/router1') // 对象 this.$Router.push({path:'/pages/router/router1'}) // 命名的路由 this.$Router.push({ name: 'router1', params: { userId: '123' }}) // 带查询参数,变成 /router1?plan=private this.$Router.push({ path: 'router1', query: { plan: 'private' }})
注意:若是提供了 path,params 会被忽略,上述例子中的 query 并不属于这种状况。因此字符串时必须是绝对的路径,name 时传递的参数必须为 params,相反 path 必须对应 query。
跟 router.push 很像,惟一的不一样就是,它不会向 history 添加新记录,而是跟它的方法名同样 —— 替换掉当前的 history 记录。
复制代码this.$Router.replace(...)
跟 router.replace 很像,惟一的不一样就是,它不会向 history 添加新记录,而是将全部的页面都关掉,打开一个新的页面。
复制代码this.$Router.replaceAll(...)
跟 router.push 很像,打开指定的 tab 菜单。
注意:router.pushTab 在传递参数的时候 H5 暂时不支持,须要开发者自行处理下,这是官方的一个 bug,后续会修复。不过可使用此一个变通的方法获取到,临时解决!
复制代码this.$Router.pushTab(...) //变通方法获取参数 H5端 const router = new Router({ routes:[ { path: "/pages/tabbar/tabbar-4/tabbar-4", name: 'tabbar-4', H5Params:{ H5Name:'' //使用一个临时变量来存储 }, beforeEnter:(to,from,next)=>{ to.H5Params.H5Name=to.query.name next(); } }, ] }) //获取方式 this.$Route.H5Params.H5Name
注意:使用变通方法时能够在临时变量上复制,虽然this.$Route.query没法获取到,可是禁用路由守卫时是携带完整参数的,全部能够再此作一些手脚。页面刷新后参数将会丢失。
这个方法的参数是一个整数,意思是在 history 记录中后退多少步,相似 window.history.go(n)。
例子
复制代码// 后退 2 步记录 this.$Router.back(2) // 若是 history 记录不够用,那就默默地失败呗 this.$Router.back(100)
命名路由
有时候,经过一个名称来标识一个路由显得更方便一些,特别是在连接一个路由,或者是执行一些跳转的时候。你能够在建立 Router 实例的时候,在 routes 配置中给某个路由设置名称。
复制代码const router = new Router({ routes: [ { path: "/pages/router/router1/router1", name: 'router1' }, { path: "/pages/router/router2/router2", name: 'router2', beforeEnter:(to,from,next)=>{ next({name:'router3',params:{msg:'我是从router2路由拦截过来的'}}); } }, { path: "/pages/router/router3/router3", name: 'router3', beforeEnter:(to,from,next)=>{ next(); } } ] });
要连接到一个命名路由,能够给 router.push() 属性传一个对象:
复制代码this.$Router.push({ name: 'router1', params: { userId: '123' }})
路由传参
在组件中使用 $Route 来获取当前路由表中的配置及参数。由于路由传值方面官方目前仅提供了query的方式进行传参,因此到目前为止uni-simple-router也仅支持query的获取方式。为了兼容H5手动刷新后参数丢失的问题。其次在 \$Route 对象中 依然保留了 params 选项后续会补上。
数据传参时尽可能不要传递深度对象,虽然中间有作一层操做。始终不能百分百还原。在深度对象传递的过程当中,深度对象将会抹平成一个大对象。并且在参数传递的过程当中传递的数据将会变成字符串
深度对象可传递 1.2.2+
例子
复制代码// 假如你是经过name 来进行跳转。 this.$Router.push({ name: 'router1', params: { userId: '123' }}) // 获取方式 this.$Route.query.userId; // 一样 等同于 this.$Router.push({ path: '/pages/router/router1/router1', query: { userId: '123' }}) // 获取方式 this.$Route.query.userId;
正如其名,uni-simple-router 提供的导航守卫主要用来经过跳转或取消的方式守卫导航。有多种机会植入路由导航过程当中:全局的, 单个路由独享的。
记住参数或查询的改变并不会触发进入/离开的导航守卫。你能够经过观察 \$Route 对象来应对这些变化。
全局前置守卫
你可使用 router.beforeEach 注册一个全局前置守卫:
复制代码const router = new Router({....}) router.beforeEach((to, from, next) => { // ... })
当一个导航触发时,全局前置守卫按照建立顺序调用。守卫是异步解析执行,此时导航在全部守卫 resolve 完以前一直处于 等待中 。
每一个守卫方法接收三个参数:
确保要调用 next 方法,不然钩子就不会被 resolved,同时在使用 next() 时,若是想导航到新的地址,这时就须要在 next() 传递一个NAVTYPE指定类型跳转。
复制代码router.beforeEach((to, from, next) => { if (to.name == 'tabbar-5') { next({ name: 'router4', params: { msg: '我拦截了tab5并重定向到了路由4页面上', }, NAVTYPE: 'push' }); } else{ next(); } })
很显然这是一个全局的生命钩子函数,当发现跳转的路由名称为 'tabbar-5' 时,中间进行拦截并重定向到名为 'router4' 的路由下,而显然易见的是 'tabbar-5' 是经过 pushTab Api进行跳转的,而 'router4' 则是一个普通的页面,应该使用 push 方法进行跳转。全部这时的咱们须要提供一个 NAVTYPE 来指定 这次跳转须要使用什么方法。若是地址为同一类型时无需传递此参数。
全局后置钩子
你也能够注册全局后置钩子,然而和守卫不一样的是,这些钩子不会接受 next 函数也不会改变导航自己:
复制代码router.afterEach((to, from) => { // ... })
路由独享守卫
你能够在路由配置上直接定义 beforeEnter 守卫:
复制代码const router = new Router({ routes: [ { path: "/pages/router/router2/router2", name: 'router2', beforeEnter:(to,from,next)=>{ next({name:'router3',params:{msg:'我是从router2路由拦截过来的'}}); } }, { path: "/pages/router/router3/router3", name: 'router3', beforeEnter:(to,from,next)=>{ next(); } } ] });
这些守卫与全局前置守卫的方法参数是同样的。
路由元信息
定义路由的时候能够配置任何本身须要的参数
复制代码const router = new Router({ routes: [{ path: "/pages/router/router1/router1"", name: 'router1', meta:{ title:'H5中须要的title', disable:true }, //xxxxx }] });
首先,咱们称呼 routes 配置中的每一个路由对象为 路由记录。一个路由匹配到的全部路由记录会暴露为 $Route 对象 (还有在导航守卫中的路由对象)下。所以,须要的时候能够自行获取。
下面例子展现在全局导航守卫中检查元字段:
复制代码router.beforeEach((to, from, next) => { if (to.meta&&to.disable) { if (!auth.loggedIn()) { next({ path: '/login', query: { redirect: to.meta.title } }) } else { next() } } else { next() // 确保必定要调用 next() } })
H5路由跳转进度条 1.2.2+
复制代码import Vue from 'vue' import Router from 'uni-simple-router'; Vue.use(Router); const router = new Router({ loading:false, //默认为开启状态,可不传递。 routes: [{ path: "/pages/tabbar/tabbar-1/tabbar-1", name: 'tabbar-1' }, { path: "/pages/tabbar/tabbar-2/tabbar-2", name: 'tabbar-2' }, ] });
完整的导航解析流程
首次触发生命钩子注意事项 1.2.2+
NAVTYPE取值类型 1.1.0+
1. push
跳转到普通页面,新开保留历史记录
2. replace
动态的导航到一个新 URL 关闭当前页面,跳转到的某个页面。
3. replaceAll
动态的导航到一个新 URL 关闭全部页面,打开到应用内的某个页面
4. pushTab
动态的导航到一个新 url 关闭全部页面,打开到应用内的某个tab
注意事项