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 彻底类似的书写风格,让你 倍感亲切 !vue

大纲

  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. 注意事项

 

安装node

NPM

复制代码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>

prop:

参数 类型 必填 默认值 描述
to String   须要跳转的路径。能够是字符串对象,也能够是一个绝对路径,也能够是一个相对路径
stopNavto Boolean false 默认绑定事件为点击事件,不阻止。
navType String push 须要跳转的 NAVTYPE类型
level Number 1 相对于当前页面路径,以 / 从后往前裁切的层级。append 为true时生效
append Boolean false 是否相对于当前页面路径跳转。根据 level 层级截取的路径 拼接 to 。 只针对使用path跳转的状况

 

编程式的导航微信小程序

废弃全部 uni-app 路由与页面跳转 Api,拥抱编程式导航。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测试经过,其余端未测试。
相关文章
相关标签/搜索