JS中怎樣實(shí)現(xiàn)Laravel的route函數(shù)-創(chuàng)新互聯(lián)

這篇文章給大家分享的是有關(guān)JS中怎樣實(shí)現(xiàn)Laravel的route函數(shù)的內(nèi)容。小編覺(jué)得挺實(shí)用的，因此分享給大家做個(gè)參考，一起跟隨小編過(guò)來(lái)看看吧。

創(chuàng)新互聯(lián)公司制作網(wǎng)站網(wǎng)頁(yè)找三站合一網(wǎng)站制作公司,專(zhuān)注于網(wǎng)頁(yè)設(shè)計(jì),成都做網(wǎng)站、網(wǎng)站建設(shè),網(wǎng)站設(shè)計(jì),企業(yè)網(wǎng)站搭建,網(wǎng)站開(kāi)發(fā),建網(wǎng)站業(yè)務(wù),680元做網(wǎng)站,已為上千家服務(wù),創(chuàng)新互聯(lián)公司網(wǎng)站建設(shè)將一如既往的為我們的客戶提供最優(yōu)質(zhì)的網(wǎng)站建設(shè)、網(wǎng)絡(luò)營(yíng)銷(xiāo)推廣服務(wù)!

大家應(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ì)直接寫(xiě)在blade模板中，這樣就導(dǎo)致js里發(fā)ajax請(qǐng)求時(shí)或者頁(yè)面跳轉(zhuǎn)時(shí)只能將請(qǐng)求地址寫(xiě)死，比如

location.href = '/blog/' + id;

這樣萬(wàn)一路由發(fā)生變更，還得去修改js文件，如果同一個(gè)路由被多個(gè)js調(diào)用，漏改一兩個(gè)還是很容易發(fā)生的。所以我就考慮能不能在js中實(shí)現(xiàn)一個(gè)類(lèi)似后端的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ù)路由名稱(chēng)返回原始的路由地址，比如：

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'})

感謝各位的閱讀！關(guān)于“JS中怎樣實(shí)現(xiàn)Laravel的route函數(shù)”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，讓大家可以學(xué)到更多知識(shí)，如果覺(jué)得文章不錯(cuò)，可以把它分享出去讓更多的人看到吧！

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)建站bm7419.com，海內(nèi)外云服務(wù)器15元起步，三天無(wú)理由+7*72小時(shí)售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國(guó)服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡(jiǎn)單易用、服務(wù)可用性高、性?xún)r(jià)比高”等特點(diǎn)與優(yōu)勢(shì)，專(zhuān)為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場(chǎng)景需求。

文章題目：JS中怎樣實(shí)現(xiàn)Laravel的route函數(shù)-創(chuàng)新互聯(lián)
網(wǎng)站路徑：http://bm7419.com/article16/dpdggg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供做網(wǎng)站、企業(yè)網(wǎng)站制作、動(dòng)態(tài)網(wǎng)站、網(wǎng)站設(shè)計(jì)、網(wǎng)站排名、網(wǎng)站內(nèi)鏈

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)