Teach you how to implement Laravel's route function in JS

The following tutorial column is developed by Laravel to introduce you to the cool operations in Laravel ORM that you don’t know. I hope it will be helpful to friends who need it!

In Laravel's routing module, we can set a name for each route, such as:

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

Then we can pass route('blog .show', ['blog' => 1]) to get the access address of this route. The backend jump can be done with

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

. The advantage of this is that if the url changes, for example, I want to To change /blog/{blog} to /boke/{blog}, you only need to change the routing file, and no other adjustments are needed. Therefore, it is recommended to give each route a name and obtain it through the route name.

But this is only available for the backend and blade templates. Websites with a slightly larger scale will separate the js files and will not write the js directly in the blade template, which will cause ajax to be sent in the js. You can only hard-code the request address when making a request or page jump, such as

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

. In this case, if the route changes, you have to modify the js file. If the same route is called by multiple js, it is easy to miss Change a few things.

So I thought about whether I could implement a backend-like route function in js.

The final solution is very simple, just two functions can do it.

The back-end 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, for example:

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 1: ES6 syntax, if you don’t use babel, convert it to ES5

Note 2: 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’s very simple. In the blade template, define all the paths that need to be used on this page in an object:

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

There is almost no difference between the usage and the back-end route

For more laravel framework technical articles, please visitlaraveltutorial!

The above is the detailed content of Teach you how to implement Laravel's route function in JS. For more information, please follow other related articles on the PHP Chinese website!