🔥码云GVP开源项目 12k star Uniapp+ElementUI 功能强大 支持多语言、二开方便! 广告
路由规则 Rap 支持history,hash两种路由方式 Rap 的路由是 Rap的核心功能之一,Rap 秉承着**约定大于配置**,Rap 的路由不需要配置大量的路由对应关系,Rap 使用的是路径查找的方式 ### history模式 ``` router_model: 'history',//路由模式 history 和 hash history_base: 'mobile',//路由是 history 时的路径前缀 ``` 对应的路径 为 /mobile/a/b?参数 后端程序员需要将所有 /mobile开头的路径统一返回统一页面 还有页面里不能使用相对路径 ### hash 模式 hash模式相对简单 ``` router_model: 'hash',//路由模式 history 和 hash ``` 对应的路径 为 #/a/b?参数 >[info] 路径 #/forum/user/add 对应的 history模式为 /mobile/forum/user/add ### 路径查找 * * * * * 如路径地址为 > #/forum/user/add 对应到的组件文件 就是 /forum/user/add.html >[info] 每个组件我们都在 data 下预定义了router变量 >可通过 this.router进行访问 ### 参数:query * * * * * ?后面的参数我们称为query > #forum/user/list?type=1&&sort=create_time this.router.query,结构为json对象 ~~~ { type:1, sort:'create_time' } ~~~ ### 参数:search * * * * * 路劲中的`数字和@开头`的 在路由查找时会被提取出来作为search 如下面两个路径: > #forum/user/5/edit >#forum/user/@tengzhinei/edit 上面的两个路径对应的组件是 `/forum/user/edit.html` 提取的search为`数组` 值在 this.router.search,结构为json对象 ~~~ [5] ~~~ 路径中可以包含多个参数 > #forum/user/2/1/edit/3 提取的search 为 [2,1,3] ### init 生命周期 * * * * * 我们为组件加入了新的生命周期init init 会在每次路径变化时调用(包括第一次),这样可以监控路径的变化 每次都会传入query和search两个变量 ~~~ <script> Rap.define({ data: function(){ return { } }, created:function () { }, init:function (query,search) { var type=query.type; var id=search[1]; console.log(query); console.log(search); },methods:{ } }) </script> ~~~ 建议在created里和路径参数无关的逻辑;在init里写路径参数相关的逻辑; ### router 变量 * * * * * this.router 还有两个参数 | 参数 |含义 | | --- | --- | | this.router.hash | 当前页面完整的hash | | this.router.page | 当前页面组件 |