Detailed explanation of how to implement Laravel's route function in JS

Everyone should know that in Laravel's routing module, we can set a name for each route, such as:

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

and then you can pass

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

to obtain the access address of this route. For backend jump, you can use

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

The advantage of this is that if the URL changes, for example, I want to change '/blog/{blog}' to '/boke/{blog}', I only need to After changing the routing file, there is no need to adjust anything else.

But this is limited to the backend and can be used in blade templates. Websites with a slightly larger scale will separate the js files and will not write them directly in the blade template. This will cause ajax requests to be sent in js. You can only hard-code the request address when the page jumps or when the page jumps, such as

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

. In this way, in case the route changes, you have to modify the js file. If at the same time A route is called by multiple js, and it is easy to miss one or two changes. So I thought about whether I could implement a backend-like route function in js.

The final solution is very simple, just two functions.

The backend part needs to implement a function

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

The function of this function is to return the original routing address based on the routing name, such as:

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

The front end also only needs one function:

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

Note : Lodash is quoted here

The function of this function is:

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

Then it is very simple, in blade Defined in the template:

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

in the js file:

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

More For detailed explanations on how to implement Laravel's route function in multiple JS, please pay attention to the PHP Chinese website for related articles!