JS中如何實(shí)現(xiàn)Laravel的route函數(shù)詳解
大家應(yīng)該都知道在Laravel的路由模塊里，我們可以給每一個(gè)路由設(shè)定一個(gè)名字，比如：
Route::get('/blog/{blog}', 'BlogController@show')->name('blog.show')
然后就可以通過
route('blog.show', ['blog' => 1])
來獲取到這個(gè)路由的訪問地址，后端跳轉(zhuǎn)可以用
return redirect()->route('blog.show', ['blog' => 1]);
這樣做的好處是如果發(fā)生url變更，比如我想把 '/blog/{blog}'改成 '/boke/{blog}' ，只需要改路由文件，別的地方都不用調(diào)整。
但這個(gè)僅限于后端，以及blade模板可以使用，稍微上點(diǎn)規(guī)模的網(wǎng)站都會把js文件單獨(dú)拎出來，不會直接寫在blade模板中，這樣就導(dǎo)致js里發(fā)ajax請求時(shí)或者頁面跳轉(zhuǎn)時(shí)只能將請求地址寫死，比如
location.href = '/blog/' + id;
這樣萬一路由發(fā)生變更，還得去修改js文件，如果同一個(gè)路由被多個(gè)js調(diào)用，漏改一兩個(gè)還是很容易發(fā)生的。所以我就考慮能不能在js中實(shí)現(xiàn)一個(gè)類似后端的route函數(shù)。
最終的解決方案很簡單，兩個(gè)函數(shù)就搞定。
后端部分需要實(shí)現(xiàn)一個(gè)函數(shù)
function route_uri($name)
{
return app('router')->getRoutes()->getByName($name)->getUri();
}
這個(gè)函數(shù)的作用是根據(jù)路由名稱返回原始的路由地址，比如：
echo route_uri('blog.show'); // 會輸出/blog/{blog}
前端也只需要一個(gè)函數(shù)：
let route = (routeUrl, param) => {
let append = [];
for (let x in param) {
let search = '{' + x + '}';
if (routeUrl.indexOf(search) >= 0) {
routeUrl = routeUrl.replace('{' + x + '}', param[x]);
} else {
append.push(x + '=' + param[x]);
}
}
let url = '/' + _.trimStart(routeUrl, '/');
if (append.length == 0) {
return url;
}
if (url.indexOf('?') >= 0) {
url += '&';
} else {
url += '?';
}
url += append.join('&');
return url;
}
注：這里引用了lodash
這個(gè)函數(shù)的作用是：
route('/blog/{blog}', {blog: 1}); //返回 /blog/1
route('/blog/{blog}', {blog: 1, preview: 1}); //返回 /blog/1?preview=1
然后就很簡單了，在blade模板中定義：
var routes = {
blog: {
show: '{{ route_uri('blog.show') }}',
update: '{{ route_uri('blog.update') }}',
destroy: '{{ route_uri('blog.destroy') }}'
}
};
在js文件里就可以：
$.post(route(routes.blog.update, {blog: 1}), {title: 'xxx', content: 'xxx'})
總結(jié)
以上就是這篇文章的全部內(nèi)容了，希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作能帶來一定的幫助，如果有疑問大家可以留言交流。
相關(guān)文章
javascript常見error對象處理，錯(cuò)誤代碼集合2008-05-05
這篇文章主要介紹了javascript中setInterval的用法的相關(guān)資料,需要的朋友可以參考下2015-07-07
做項(xiàng)目時(shí)候常常遇到，要做一個(gè)數(shù)字滾動(dòng)增加的效果。如何利用JavaScript實(shí)現(xiàn)數(shù)字增長效果，一起來跟本文學(xué)習(xí)學(xué)習(xí)。2016-07-07
基于JS實(shí)現(xiàn)01支付后的10秒倒計(jì)時(shí)
這是一個(gè)通過js實(shí)現(xiàn)的支付后的頁面，點(diǎn)擊支付會跳出一個(gè)彈窗，提示你是否要確定支付，確定后進(jìn)入付后界面，該頁面有著10秒倒計(jì)時(shí)，計(jì)時(shí)結(jié)束后便會返回原界面，也可以選擇立刻返回，來返回主頁面，這篇文章主要介紹了基于JS實(shí)現(xiàn)01支付后的10秒倒計(jì)時(shí),需要的朋友可以參考下2023-03-03
谷歌showModalDialog()方法不兼容出現(xiàn)對話窗口的解決辦法
這篇文章給大家介紹了谷歌showModalDialog()方法不兼容出現(xiàn)對話窗口的解決辦法，解決辦法非常好，感興趣的朋友可以參考下2016-02-02
JSON是一種簡單的數(shù)據(jù)格式，比xml更輕巧，在 JavaScript 中處理 JSON 數(shù)據(jù)不需要任何特殊的 API 或工具包，下面有個(gè)示例，大家可以參考下2014-04-04
JavaScript中關(guān)于數(shù)組的調(diào)用方式
這篇文章主要介紹了JavaScript中關(guān)于數(shù)組的調(diào)用方式，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-02-02
這篇文章主要介紹了layui導(dǎo)航欄二級菜單不顯示問題及解決方案，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-05-05
JavaScript獲取和設(shè)置CheckBox狀態(tài)的簡單方法
這篇文章介紹了JavaScript獲取和設(shè)置CheckBox狀態(tài)的簡單方法，有需要的朋友可以參考一下2013-07-07
JavaScript中運(yùn)算符規(guī)則和隱式類型轉(zhuǎn)換示例詳解
JavaScript中運(yùn)算符規(guī)則的隱式類型轉(zhuǎn)換是什么? 這是每個(gè)學(xué)習(xí)Javascript的新手們都應(yīng)該知道的一個(gè)問題，下面這篇文章主要給大家介紹了關(guān)于JavaScript中運(yùn)算符規(guī)則和隱式類型轉(zhuǎn)換的相關(guān)資料，需要的朋友可以參考借鑒，下面來一起看看吧。2017-09-09