JS中如何實現(xiàn)Laravel的route函數(shù)詳解
更新時間：2017年02月12日 14:42:14 作者：leo108
這篇文章主要給大家介紹了JS中是如何實現(xiàn)Laravel的route函數(shù)，文中通過示例代碼介紹的很詳細，相信對大家具有一定的參考價值，有需要的朋友們下面來一起看看吧。
大家應該都知道在Laravel的路由模塊里，我們可以給每一個路由設定一個名字，比如：
Route::get('/blog/{blog}', 'BlogController@show')->name('blog.show')
然后就可以通過
route('blog.show', ['blog' => 1])
來獲取到這個路由的訪問地址，后端跳轉可以用
return redirect()->route('blog.show', ['blog' => 1]);
這樣做的好處是如果發(fā)生url變更，比如我想把 '/blog/{blog}'改成 '/boke/{blog}' ，只需要改路由文件，別的地方都不用調整。
但這個僅限于后端，以及blade模板可以使用，稍微上點規(guī)模的網(wǎng)站都會把js文件單獨拎出來，不會直接寫在blade模板中，這樣就導致js里發(fā)ajax請求時或者頁面跳轉時只能將請求地址寫死，比如
location.href = '/blog/' + id;
這樣萬一路由發(fā)生變更，還得去修改js文件，如果同一個路由被多個js調用，漏改一兩個還是很容易發(fā)生的。所以我就考慮能不能在js中實現(xiàn)一個類似后端的route函數(shù)。
最終的解決方案很簡單，兩個函數(shù)就搞定。
后端部分需要實現(xiàn)一個函數(shù)
function route_uri($name)
{
return app('router')->getRoutes()->getByName($name)->getUri();
}
這個函數(shù)的作用是根據(jù)路由名稱返回原始的路由地址，比如：
echo route_uri('blog.show'); // 會輸出/blog/{blog}
前端也只需要一個函數(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
這個函數(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'})
總結
以上就是這篇文章的全部內容了，希望本文的內容對大家的學習或者工作能帶來一定的幫助，如果有疑問大家可以留言交流。
相關文章
使用js提交表單想必大家都會，如果要實現(xiàn)一個頁面有多個提交按鈕，你會嗎？下面有個不錯的示例，大家可以感受下2013-11-11
本文主要介紹了JS中arguments的使用示例，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2023-05-05
這篇文章主要介紹了基于JavaScript實現(xiàn)表格隔行換色,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2020-05-05
JavaScript計算字符串中特定字符出現(xiàn)次數(shù)的實例詳解
在JavaScript編程中,經(jīng)常會遇到需要計算字符串中特定字符出現(xiàn)次數(shù)的情況,在本文中,我將分享兩個簡單的JavaScript函數(shù),用于計算字符串中特定字符出現(xiàn)的次數(shù),需要的朋友可以參考下2023-11-11
借助JavaScript腳本判斷瀏覽器Flash Player信息的方法
做了一個小的Demo，在測試時發(fā)現(xiàn)經(jīng)常報錯，對此總結了一下借助JavaScript腳本判斷瀏覽器Flash Player信息的方法,需要的朋友可以參考下2014-07-07
javascript強制彈出新窗口，主要是利用的動態(tài)創(chuàng)建鏈接。2009-12-12
這篇文章主要介紹了ES6使用 const 聲明,本文給大家介紹的非常詳細對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2023-08-08
對于生成縮略圖一般做法是通過后端語言php等來生成，但是為了給服務器減壓，我們或許可以從前端來著手，先生成好不同尺寸的縮略圖，傳給后端，而后端只需要將前端傳過來的圖片進行存儲就好了2020-10-10
這篇文章主要介紹了webpack多入口打包的相關資料,本文通過實例代碼給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友參考下吧2023-12-12
Fixie.js 自動填充內容的插件，需要的朋友可以參考下2012-06-06