一个更为简洁的Vue-router，专为 uni-app 量身打造
是否你也曾感叹过为啥官方就不搞一个类似 Vue-router 一样的路由管理器？苦苦寻找。搜遍百度？社区？以及 Google？甚至是官方的各大 QQ 群？难受没找到！直到此插件出来之前也没有一个更好的解决方法。于是它，没错，就是它，它诞生了。只要你会使用 Vue-router 即可马上上手，下面文档的完全不用看。它保留了 Vue-router 完全相似的书写风格，让你 倍感亲切 !
-
组件式的导航 1.2.2+
-
路由传参 1.2.2+
-
H5路由跳转进度条 1.2.2+
-
首次触发生命钩子注意事项 1.2.2+
-
NAVTYPE取值类型 1.1.0+
npm install uni-simple-routerimport Vue from 'vue'
import Router from 'uni-simple-router'
Vue.use(Router)这是一个很难抉择的问题？加还是不加这是一个问题！为了让开发者更快捷，最后还是封装上了 router-link 组件。为了能满足多端这里必须批评下 微信小程序，它要搞特殊。没得办法的！所以没法帮你们注册组件。它那玩意只能在 main.js 中才能注册组件！！！！ 不多说了，直接上代码。
// 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,拥抱编程式导航。
router.push(location, onComplete?, onAbort?) 等同于 uni.navigateTo()
想要导航到不同的 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.replace(location, onComplete?, onAbort?) 等同于 uni.redirectTo()
跟 router.push 很像，唯一的不同就是，它不会向 history 添加新记录，而是跟它的方法名一样 —— 替换掉当前的 history 记录。
this.$Router.replace(...)router.replaceAll(location, onComplete?, onAbort?) 等同于 uni.reLaunch()
跟 router.replace 很像，唯一的不同就是，它不会向 history 添加新记录，而是将所有的页面都关掉，打开一个新的页面。
this.$Router.replaceAll(...)router.pushTab(location, onComplete?, onAbort?) 等同于 uni.switchTab()
跟 router.push 很像，打开指定的 tab 菜单。
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.H5Namerouter.back(n) 等同于 uni.navigateBack()
这个方法的参数是一个整数，意思是在 history 记录中后退多少步，类似 window.history.go(n)。
// 后退 2 步记录
this.$Router.back(2)
// 如果 history 记录不够用，那就默默地失败呗
this.$Router.back(100)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 选项后续会补上。
// 假如你是通过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;const router = new Router({....})
router.beforeEach((to, from, next) => {
// ...
})当一个导航触发时，全局前置守卫按照创建顺序调用。守卫是异步解析执行，此时导航在所有守卫 resolve 完之前一直处于 等待中 。
每个守卫方法接收三个参数：
- to: Route: 即将要进入的目标 路由对象
- from: Route: 当前导航正要离开的路由
- next: Function: 一定要调用该方法来 resolve 这个钩子。执行效果依赖 next 方法的调用参数。
- next(): 进行管道中的下一个钩子。如果全部钩子执行完了，则导航的状态就是 confirmed (确认的)。
- next(false): 中断当前的导航。如果浏览器的 URL 改变了 (可能是用户手动或者浏览器后退按钮)，那么 URL 地址会重置到 from 路由对应的地址。
- next('/') 或者 next({ path: '/' }): 跳转到一个不同的地址。当前的导航被中断，然后进行一个新的导航。你可以向 next 传递任意位置对象
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 来指定 此次跳转需要使用什么方法。如果地址为同一类型时无需传递此参数。
router.afterEach((to, from) => {
// ...
})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()
}
})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'
},
]
});- 导航被触发。
- 调用全局的 beforeEach 守卫。
- 在路由配置里调用 beforeEnter。
- 导航被确认。
- 调用全局的 afterEach 钩子。
- 触发 DOM 更新。
- 首次启动依次触发全局钩子、组件独享钩子。
- 在app.vue 中跳转时会获得 ONLAUNCH: true 的标识，回显在每个钩子的同to、from 下。同时你也可以通过 this.$Route 获取到。
- 在next() 中拦截跳转时必须明确的给出标识NAVTYPE,否则无法跳转。在页面同类型时可以忽视。
跳转到普通页面，新开保留历史记录
动态的导航到一个新 URL 关闭当前页面，跳转到的某个页面。
动态的导航到一个新 URL 关闭所有页面，打开到应用内的某个页面
动态的导航到一个新 url 关闭所有页面，打开到应用内的某个tab
- 内置对象名称差异 $Router 非 $router，$Route 非 $route
- pushTab api在跳转到tab时，H5端使用 $Route 无法访问到传递的参数，可以使用一种变通的方式 相关测试案例
- APP、微信小程序、百度小程序、H5测试通过，其他端未测试。