Details about how to implement the route function of Laravel in JS.

Details about how to implement the route function of Laravel in JS.

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

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

Then you can use

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

To obtain the access address of this route.

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

The advantage of this is that if a url change occurs, for example'/blog/{blog}'Change'/boke/{blog}', You only need to change the path file. You do not need to change it elsewhere.

However, this is only applicable to backend and blade templates. For websites of a slightly higher scale, js files are extracted separately and not directly written in the blade template, in this way, when an ajax request is sent in js or when the page jumps, the request address can only be written to death, for example

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

In this case, the js file has to be modified in case of a route change. If the same route is called by multiple js nodes, it is very easy to modify one or two routes. So I will consider whether I can implement a route function similar to the backend in js.

The final solution is very simple, and the two functions are done.

The backend part needs to implement a function.

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

This function returns the original route address based on the route name, for example:

Echo route_uri ('blog. show '); // The/blog/{blog} is output}

The front end 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:Here lodash is referenced

The function is used:

Route ('/blog/{blog}', {blog: 1}); // return/blog/1 route ('/blog/{blog}', {blog: 1, preview: 1}); // return/blog/1? Preview = 1

Then it's easy to define in the blade template:

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

In the js file, you can:

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

Summary

The above is all about this article. I hope this article will help you in your study or work. If you have any questions, please leave a message.