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'; 來跳轉。前面無需加 #,它會自動追加。
### 路由結尾
在路由結尾部分出現的 / 與不出現,是兩個完全不同的路由。比如下面這個:
- user/set
讀取的視圖文件是:.views/user/set.html
- user/set/
讀取的視圖文件是:./views/user/set/index.html (TIPS:這里的 index.html 即是目錄下的默認主視圖,下文會有講解)
因此一定要注意結尾處的 /,避免視圖讀取錯誤。