Explication détaillée de la façon d'implémenter la fonction de route de Laravel dans JS

Tout le monde devrait savoir que dans le module de routage de Laravel, nous pouvons définir un nom pour chaque itinéraire, tel que :

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

et ensuite vous pouvez obtenir l'adresse d'accès de cet itinéraire via

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

Pour le saut backend, vous pouvez utiliser

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

L'avantage est que si l'url change, par exemple, je veux changer

en '/blog/{blog}', il me suffit de changer le fichier de routage, et il n'y a rien à ajuster autre. '/boke/{blog}'

Mais cela est limité au backend et peut être utilisé dans les modèles de lame. Les sites Web avec une échelle légèrement plus grande sépareront les fichiers js et ne les écriront pas directement dans le modèle de lame. Cela entraînera l'envoi de requêtes ajax. envoyé en js. Vous ne pouvez écrire l'adresse de la demande que lorsque la page saute, comme

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

De cette façon, si l'itinéraire change, vous devez modifier le fichier js. Si la même route est appelée par plusieurs js, il est facile de manquer une ou deux modifications. J'ai donc réfléchi à la possibilité d'implémenter une fonction de route de type backend dans js.

La solution finale est très simple, juste deux fonctions.

La partie backend doit implémenter une fonction

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

La fonction de cette fonction est de renvoyer l'adresse de routage d'origine en fonction du nom de routage, tel que :

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

Le frontal n'a également besoin que d'une seule fonction :

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

Remarque : Ceci fait référence à lodash

La fonction de cette fonction est :

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

Ensuite c'est très simple Définissez-le dans le template blade :

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

Définissez-le simplement dans le fichier js :

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

Pour des explications plus détaillées sur la façon d'implémenter la fonction de route de Laravel dans JS, veuillez faire attention au site Web chinois de PHP !