Learning Laravel 6 and VueJS for Javascript/NodeJS developer part 4 - Basics of Routing in Larvel

Routing in laravel

In the last part, we talked about routing on a deeper level and how it works in general. In this part, we will talk more about how routing works in laravel.

Laravel comes with its router, and also vuejs have its router. In this part, we will only talk about the laravel router.

The basics

You will find a routes folder in the main folder of your laravel project.

In this folder, there are four files by default if you are using laravel six or higher. The four files have all different porpuses, and you should understand when to add a route to what specific file.

These files are named api.php, channels.php, console.php, and web.php. In this part, we will talk only about the api.php and the web.php. The channels.php and console.php files are a more advanced topic, which we will cover later.

Like the name is saying, the web.php is for your web routes. Web routes are the routes that are visited by your end-user in the browser.
If you require an API, then you need to define your routes in the api.php. I think until this point; this is pretty clear.

Let's have a look at a hello world example.

<?php

Route::get('/', function () {
    return 'hello world!';
});

If you edit your web.php, save the file and then go to http://127.0.0.1:8000 or whatever your laravel application runs on.
You now only should see a white page with the text 'hello world'.

Let us break this short snippet down.

Route::get means that this should listen to an HTTP get request. The first argument / is the path of that get request. In our example, it is the root route. The second argument is a closure that will run once an HTTP request comes on. A closure is a function without a name. It is also called an anonymous function. The browser will receive whatever you return in that function. Simple right?

By default, you will see the following function code in the web.php file.

Route::get('/', function () {
    return view('welcome');
});

This closure now returns the function named view with the argument welcome. This looks pretty cryptic, but you will understand it pretty quickly. Look into your resources/view folder. There you will find a file called welcome.blade.php. Calling the the view function with the parameter welcome will return this file to the browser in a rendered form. This means all blade template code will be run on the server, and then the generate PHP file will be sent to the browser.

Route Parameters

There are several cases where you will need to parse the URL. The most common example is a Id parameter. It can be a user Id, or it can be a post Id or what every Id you need right now. In our example, we will try to get the post with the Id of 1.

Route::get('/post/{postId}', function ($postId = null) {
    return $postId;
});

Let's break this code down. The first argument of the Route::get function is again the URL path, but now we see curly braces around postId. The curly braces tell laravel that this is a parameter. We need to reference this parameter also in the closure. This is why we have $postId as the first argument. This parameter now is required. Just having an /post/ path will not work. If we want to make the parameter optional, we need to change the code as follows.

Route::get('/post/{postId?}', function ($postId = null) {
    return $postId;
});

The only change here is the ? at the end of our parameter name. The ? will tell laravel that the postId is optional, and if the user does not pass it, you still can respond to this route.

Types of request

Until now, we only worked with get, but there are more request types in laravel. Here is a list for all of them:

• get
• post
• put
• delete
• patch
• options

Listing all routes in laravel

Laravel has a neat command to show all the routes that are available.
All you need is to type the following command.

PHP artisan route:list

This will display a table in your terminal with all the routes.

+--------+----------+---------------+------+---------+--------------+
| Domain | Method   | URI           | Name | Action  | Middleware   |
+--------+----------+---------------+------+---------+--------------+
|        | GET|HEAD | /             |      | Closure | web          |
|        | GET|HEAD | api/user      |      | Closure | api,auth:api |
|        | GET|HEAD | post/{postId} |      | Closure | web          |
+--------+----------+---------------+------+---------+--------------+