uni-app 的router方案 （大佬写的插件，借用一下并宣传）

项目地址 githup :https://github.com/SilurianYang/uni-simple-router

 

uni-simple-router

一个更为简洁的Vue-router，专为 uni-app 量身打造

简介说明:

是否你也曾感叹过为啥官方就不搞一个相似 Vue-router 同样的路由管理器？苦苦寻找。搜遍百度？社区？以及 Google？甚至是官方的各大 QQ 群？难受没找到！直到此插件出来以前也没有一个更好的解决方法。因而它，没错，就是它，它诞生了。只要你会使用 Vue-router 便可立刻上手，下面文档的彻底不用看。它保留了 Vue-router 彻底类似的书写风格，让你 倍感亲切 !

大纲

1. 安装

2. 组件式的导航 1.2.2+

3. 编程式的导航

4. 命名式路由

5. 路由传参 1.2.2+

6. 全局前置守卫

7. 全局后置钩子

8. 路由独享守卫

9. 路由元信息

10. H5路由跳转进度条 1.2.2+

11. 完整的导航解析流程

12. 首次触发生命钩子注意事项 1.2.2+

13. NAVTYPE取值类型 1.1.0+

14. 注意事项

 

安装

NPM

复制代码npm install uni-simple-router

若是在一个模块化工程中使用它，必需要经过 Vue.use() 明确地安装路由功能：

复制代码import Vue from 'vue'
import Router from 'uni-simple-router'

Vue.use(Router)

---

 

组件式的导航 1.2.2+

这是一个很难抉择的问题？加仍是不加这是一个问题！为了让开发者更快捷，最后仍是封装上了 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>

prop：

参数	类型	必填	默认值	描述
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?, ?) 等同于 uni.navigateTo()

注意：在 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.replace(location, onComplete?, ?) 等同于 uni.redirectTo()

跟 router.push 很像，惟一的不一样就是，它不会向 history 添加新记录，而是跟它的方法名同样 —— 替换掉当前的 history 记录。

复制代码this.$Router.replace(...)

---

router.replaceAll(location, onComplete?, ?) 等同于 uni.reLaunch()

跟 router.replace 很像，惟一的不一样就是，它不会向 history 添加新记录，而是将全部的页面都关掉，打开一个新的页面。

复制代码this.$Router.replaceAll(...)

---

router.pushTab(location, onComplete?, ?) 等同于 uni.switchTab()

跟 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没法获取到，可是禁用路由守卫时是携带完整参数的，全部能够再此作一些手脚。页面刷新后参数将会丢失。

---

router.back(n) 等同于 uni.navigateBack()

这个方法的参数是一个整数，意思是在 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 完以前一直处于 等待中 。

每一个守卫方法接收三个参数：

• to: Route: 即将要进入的目标 路由对象
• from: Route: 当前导航正要离开的路由
• next: Function: 必定要调用该方法来 resolve 这个钩子。执行效果依赖 next 方法的调用参数。
  • next(): 进行管道中的下一个钩子。若是所有钩子执行完了，则导航的状态就是 confirmed (确认的)。
  • next(false): 中断当前的导航。若是浏览器的 URL 改变了 (多是用户手动或者浏览器后退按钮)，那么 URL 地址会重置到 from 路由对应的地址。
  • next('/') 或者 next({ path: '/' }): 跳转到一个不一样的地址。当前的导航被中断，而后进行一个新的导航。你能够向 next 传递任意位置对象

确保要调用 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. 调用全局的 beforeEach 守卫。
3. 在路由配置里调用 beforeEnter。
4. 导航被确认。
5. 调用全局的 afterEach 钩子。
6. 触发 DOM 更新。

---

 

首次触发生命钩子注意事项 1.2.2+

1. 首次启动依次触发全局钩子、组件独享钩子。
2. 在app.vue 中跳转时会得到 ONLAUNCH: true 的标识，回显在每一个钩子的同to、from 下。同时你也能够经过 this.\$Route 获取到。
3. 在next() 中拦截跳转时必须明确的给出标识NAVTYPE,不然没法跳转。在页面同类型时能够忽视。

---

 

NAVTYPE取值类型 1.1.0+

1. push

跳转到普通页面，新开保留历史记录

2. replace

动态的导航到一个新 URL 关闭当前页面，跳转到的某个页面。

3. replaceAll

动态的导航到一个新 URL 关闭全部页面，打开到应用内的某个页面

4. pushTab

动态的导航到一个新 url 关闭全部页面，打开到应用内的某个tab

---

 

注意事项

1. 内置对象名称差别 \$Router 非 \$router，$Route 非 \$route
2. pushTab api在跳转到tab时，H5端使用 \$Route 没法访问到传递的参数，可使用一种变通的方式 相关测试案例
3. APP、微信小程序、百度小程序、H5测试经过，其余端未测试。