JS에서 Laravel의 경로 기능을 구현하는 방법에 대한 자세한 설명

Laravel의 라우팅 모듈에서는

Route::get('/blog/{blog}', 'BlogController@show')->name('blog.show')

와 같이 각 경로에 이름을 설정할 수 있다는 점을 모두가 알아야 합니다. 그런 다음

route('blog.show', ['blog' => 1])

이 경로의 액세스 주소를 얻으려면

return redirect()->route('blog.show', ['blog' => 1]);

이 방법의 장점은 URL이 변경되는 경우(예: '/blog/{blog}'를 '/boke/{blog}'로 변경하려는 경우) 라우팅 파일만 변경하면 되며 다른 조정이 필요하지 않다는 것입니다.

그러나 이것은 백엔드로 제한되며 블레이드 템플릿에서 사용할 수 있습니다. 약간 더 큰 규모의 웹 사이트는 js 파일을 분리하고 블레이드 템플릿에 직접 쓰지 않습니다. js로 보내면

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

처럼 페이지가 점프할 때만 요청 주소를 적어주면 됩니다. 경로가 변경되면 js 파일을 수정해야 합니다. 동시에 여러 js에서 경로를 호출하면 한두 가지 변경 사항을 놓치기 쉽습니다. 그래서 js에서도 백엔드 같은 라우트 기능을 구현할 수 있을까 고민했습니다.

최종 솔루션은 매우 간단합니다. 단 두 가지 기능만 있으면 됩니다.

백엔드 부분에서

function route_uri($name)
{
 return app('router')->getRoutes()->getByName($name)->getUri();
}

함수 구현이 필요합니다. 이 함수의 기능은 라우팅 이름을 기준으로 원래의 라우팅 주소를 반환하는 것입니다. , 예:

echo route_uri('blog.show'); // 会输出/blog/{blog}

프런트 엔드에도 하나의 기능만 필요합니다:

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는 여기에 인용되어 있습니다

이 기능의 기능은 다음과 같습니다:

route('/blog/{blog}', {blog: 1}); //返回 /blog/1
route('/blog/{blog}', {blog: 1, preview: 1}); //返回 /blog/1?preview=1

그런 다음 템플릿에 정의된 블레이드에서 매우 간단합니다.

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

더 보기 Laravel의 경로 기능을 여러 JS에서 구현하는 방법에 대한 자세한 설명은 PHP 중국어 웹사이트의 관련 기사를 참고하세요!