原文:http://www.upwqy.com/details/248.html
layuiAdmin 的路由是采用 location.hash 的机制,即路由地址是放在 ./#/
后面,并通过 layui 自带的方法: layui.router()
来进行解析。每一个路由都对应一个真实存在的视图文件,且路由地址和视图文件的路径是一致的(相对 views 目录)。因此,你不再需要通过配置服务端的路由去访问一个页面,也无需在 layuiAdmin 内部代码中去定义路由,而是直接通过 layuiAdmin 的前端路由去访问,即可匹配相应目录的视图,从而呈现出页面结果。
./#/path1/path2/path3/key1=value1/key2=value2…
一个实际的示例:
./#/user/set ./#/user/set/uid=123/type=1#xxx(下面将以这个为例继续讲解)
当你需要对路由结构进行解析时,你只需要通过 layui 内置的方法 layui.router()
即可完成。如上面的路由解析出来的结果是:
{ path: ['user','set'] ,search: {uid: 123, type: 1} ,href: 'user/set/uid=123/type=1' ,hash: 'xxx' }
可以看到,不同的结构会自动归纳到相应的参数中,其中:
path:存储的是路由的目录结构
search:存储的是路由的参数部分
href:存储的是 layuiAdmin 的完整路由地址
hash:存储的是 layuiAdmin 自身的锚记,跟系统自带的
location.hash
有点类似
通过 layui.router()
得到路由对象后,你就可以对页面进行个性化操作、异步参数传值等等。如:
//在 JS 中获取路由参数 var router = layui.router(); admin.req({ url: 'xxx' ,data: { uid: router.search.uid } });
<!-- 在动态模板中获取路由参数 --> <script type="text/html" template lay-url="./xxx/?uid={{ layui.router().search.uid }}"> … </script> <!-- 或 --> <script type="text/html" template lay-url="./xxx/" lay-data="{uid:'{{ layui.router().search.uid }}'}"> … </script>
通过上文的路由规则,你已经大致清楚了 layuiAdmin 路由的基本原理和解析方法。那么如何完成路由的跳转呢?
在视图文件的 HTML 代码中,通过对任意元素设定 lay-href="/user/set/uid=123/type=1"
,好处是:任意元素都可以触发跳转。缺点是:只能在浏览器当前选项卡完成跳转(注意:不是 layuiAdmin 的选项卡)
直接对 a 标签设定 href,如: <a href="#/user/set">text</a>
。好处是:你可以通过设定 target="_blank"
来打开一个浏览器新选项卡。缺点是:只能设置 a
标签,且前面必须加 /#/
在 JS 代码中,还可通过 location.hash = '/user/set';
来跳转。前面无需加 #
,它会自动追加。
在路由结尾部分出现的 /
与不出现,是两个完全不同的路由。比如下面这个:
user/set
读取的视图文件是:.views/user/set.html
user/set/
读取的视图文件是:./views/user/set/index.html (TIPS:这里的 index.html 即是目录下的默认主视图,下文会有讲解)
因此一定要注意结尾处的 /
,避免视图读取错误。
实际应用
<a class="layui-btn layui-btn-xs" target="_blank" href="#/order/print/id={{d.id}}">打印</a>
print.html
<div class="layui-form" lay-filter="order-info-form-list" id="order-info-form-list" style="padding: 20px 30px 0 0;"> <script type="text/html" template lay-url="{{layui.setter.host.apiurl}}data/sl_order/info/?id={{ layui.router().search.id }}" lay-done="layui.data.done(d)" > <table class="layui-table" style="width: 100%"> <tbody> <tr> <td>用户</td> <td>订单编号</td> <td>总金额</td> </tr> <tr> <td>{{d.data.sl_user.username}} {{d.data.sl_user.mobile}}</td> <td>{{d.data.order_no}}</td> <td>{{d.data.total_price}}</td> </tr> </tbody> </table> </script> </div> <script type="text/javascript"> layui.data.done = function(d){ layui.use(['form'], function(){ var form = layui.form; form.render(null, 'order-info-form-list'); //渲染该模板下的动态表单 window.print() }); }; </script>
上一篇: 通过radio按钮切换 item选项的隐藏和显示
下一篇: tp5项目改造 - 2 (接口基类)