Detaillierte Erklärung, wie die Routenfunktion von Laravel in JS implementiert wird

Jeder sollte wissen, dass wir im Routing-Modul von Laravel einen Namen für jede Route festlegen können, wie zum Beispiel:

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

und dann können Sie erhalten Die Zugriffsadresse dieser Route über

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

Für den Backend-Sprung können Sie

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

<🎜 verwenden >

Der Vorteil davon ist, dass ich bei einer Änderung der URL, zum Beispiel wenn ich

in '/blog/{blog}' ändern möchte, nur die Routing-Datei ändern muss und keine Anpassungen erforderlich sind irgendetwas anderes. '/boke/{blog}'

Dies ist jedoch auf das Backend beschränkt und kann in Blade-Vorlagen verwendet werden. Websites mit einem etwas größeren Maßstab trennen die JS-Dateien und schreiben sie nicht direkt in die Blade-Vorlage In js gesendet. Sie können die Anforderungsadresse nur aufschreiben, wenn die Seite springt, z. B.

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

. Wenn sich die Route ändert, müssen Sie die js-Datei ändern. Wenn dieselbe Route von mehreren js aufgerufen wird, kann es leicht passieren, dass eine oder zwei Änderungen übersehen werden. Also überlegte ich, ob ich eine Backend-ähnliche Routenfunktion in js implementieren könnte.

Die endgültige Lösung ist sehr einfach, nur zwei Funktionen.

Der Backend-Teil muss eine Funktion implementieren

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

Die Funktion dieser Funktion besteht darin, die ursprüngliche Routing-Adresse basierend auf der zurückzugeben Routing-Name, wie zum Beispiel:

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

Das Frontend benötigt auch nur eine Funktion:

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;
}

Hinweis: Dies bezieht sich auf lodash

Die Funktion dieser Funktion ist:

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

Dann ist es ganz einfach in der Blade-Vorlage zu definieren:

var routes = {
 blog: {
  show: '{{ route_uri('blog.show') }}',
  update: '{{ route_uri('blog.update') }}',
  destroy: '{{ route_uri('blog.destroy') }}'
 }
};

Definieren Sie es einfach in der js-Datei:

$.post(route(routes.blog.update, {blog: 1}), {title: 'xxx', content: 'xxx'})

Ausführlichere Erklärungen zur Implementierung der Routenfunktion von Laravel in JS finden Sie auf der chinesischen PHP-Website!