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