layuiadmin 路由

原文：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 路由的基本原理和解析方法。那么如何完成路由的跳转呢？

1. 在视图文件的 HTML 代码中，通过对任意元素设定 lay-href="/user/set/uid=123/type=1" ，好处是：任意元素都可以触发跳转。缺点是：只能在浏览器当前选项卡完成跳转（注意：不是 layuiAdmin 的选项卡）

2. 直接对 a 标签设定 href，如： <a href="#/user/set">text</a> 。好处是：你可以通过设定 target="_blank" 来打开一个浏览器新选项卡。缺点是：只能设置 a 标签，且前面必须加 /#/

3. 在 JS 代码中，还可通过 location.hash = '/user/set'; 来跳转。前面无需加 #，它会自动追加。

路由结尾

在路由结尾部分出现的 / 与不出现，是两个完全不同的路由。比如下面这个：

1. user/set
   读取的视图文件是：.views/user/set.html

2. 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>