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