## 基本路由
在學習新框架時，您的首要任務之一是確定如何處理路由。或者換句話說，當我訪問瀏覽器中的首頁URL時，瀏覽器中展現歡迎頁面！
所有的 `Laravel` 路由都在 `routes` 目錄中的路由文件中定義，這些文件都由框架自動加載。`routes/web.php` 文件用于定義 web 界面的路由。這里面的路由都會被分配給 `web` 中間件組，它提供了會話狀態和 `CSRF` 保護等功能。定義在 `routes/api.php` 中的路由都是無狀態的，并且被分配了 `api` 中間件組。
今天我們先從基本的web界面路由開始，打開 `routes/web.php` ：
```php
Route::get('/', function () {
return view('welcome');
});
```
構建最基本的路由只需要一個 URI 與一個 閉包，這里提供了一個非常簡單優雅的定義路由的方法，向瀏覽器展示 `welcome` 頁面信息。
`welcome` 試圖在 `resources/views` 文件夾下定義，簡單修改一下看是否改變：
```html
<!doctype html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Laravel</title>
<!-- Fonts -->
<link href="https://fonts.googleapis.com/css?family=Nunito:200,600" rel="stylesheet" type="text/css">
<!-- Styles -->
<style>
html, body {
background-color: #fff;
color: #636b6f;
font-family: 'Nunito', sans-serif;
font-weight: 200;
height: 100vh;
margin: 0;
}
.full-height {
height: 100vh;
}
.flex-center {
align-items: center;
display: flex;
justify-content: center;
}
.position-ref {
position: relative;
}
.top-right {
position: absolute;
right: 10px;
top: 18px;
}
.content {
text-align: center;
}
.title {
font-size: 84px;
}
.links > a {
color: #636b6f;
padding: 0 25px;
font-size: 13px;
font-weight: 600;
letter-spacing: .1rem;
text-decoration: none;
text-transform: uppercase;
}
.m-b-md {
margin-bottom: 30px;
}
</style>
</head>
<body>
<div class="flex-center position-ref full-height">
<div class="content">
<div class="title m-b-md">
Hello Laravel
</div>
<div class="links">
<a href="https://laravel.com/docs">Documentation</a>
<a href="https://laracasts.com">Laracasts</a>
<a href="https://laravel-news.com">News</a>
<a href="https://nova.laravel.com">Nova</a>
<a href="https://forge.laravel.com">Forge</a>
<a href="https://github.com/laravel/laravel">GitHub</a>
</div>
</div>
</div>
</body>
</html>
```
### 基本使用
在web路由頁面創建 `about` 和 `news` 路由：
```php
Route::get('/about', function () {
return view('about');
});
Route::get('/news', function () {
return view('news');
});
```
在 `resources/views` 下創建 `about.blade.php` 和 `news.blade.php` 試圖：
* about.blade.php
```html
<!doctype html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Laravel</title>
<!-- Fonts -->
<link href="https://fonts.googleapis.com/css?family=Nunito:200,600" rel="stylesheet" type="text/css">
<!-- Styles -->
<style>
html, body {
background-color: #fff;
color: #636b6f;
font-family: 'Nunito', sans-serif;
font-weight: 200;
height: 100vh;
margin: 0;
}
.full-height {
height: 100vh;
}
.flex-center {
align-items: center;
display: flex;
justify-content: center;
}
.position-ref {
position: relative;
}
.top-right {
position: absolute;
right: 10px;
top: 18px;
}
.content {
text-align: center;
}
.title {
font-size: 84px;
}
.links > a {
color: #636b6f;
padding: 0 25px;
font-size: 13px;
font-weight: 600;
letter-spacing: .1rem;
text-decoration: none;
text-transform: uppercase;
}
.m-b-md {
margin-bottom: 30px;
}
</style>
</head>
<body>
<div class="flex-center position-ref full-height">
<div class="content">
<div class="title m-b-md">
假裝寫代碼的晚黎
</div>
<div class="links">
<a href="/">Home</a>
<a href="/about">about</a>
<a href="/news">News</a>
</div>
</div>
</div>
</body>
</html>
```
* news.blade.php
```
<!doctype html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Laravel</title>
<!-- Fonts -->
<link href="https://fonts.googleapis.com/css?family=Nunito:200,600" rel="stylesheet" type="text/css">
<!-- Styles -->
<style>
html, body {
background-color: #fff;
color: #636b6f;
font-family: 'Nunito', sans-serif;
font-weight: 200;
height: 100vh;
margin: 0;
}
.full-height {
height: 100vh;
}
.flex-center {
align-items: center;
display: flex;
justify-content: center;
}
.position-ref {
position: relative;
}
.top-right {
position: absolute;
right: 10px;
top: 18px;
}
.content {
text-align: center;
}
.title {
font-size: 84px;
}
.links > a {
color: #636b6f;
padding: 0 25px;
font-size: 13px;
font-weight: 600;
letter-spacing: .1rem;
text-decoration: none;
text-transform: uppercase;
}
.m-b-md {
margin-bottom: 30px;
}
</style>
</head>
<body>
<div class="flex-center position-ref full-height">
<div class="content">
<div class="title m-b-md">
Larametrics
</div>
<p>
Larametrics is an open-source self-hosted metrics and notifications platform for Laravel apps created by Andrew Schmelyun. It’s simple to get started and only takes a few minutes to get started. The official Getting Started documentation describes Larametrics as follows:
What exactly does that mean? Think of it as a simple version of sentry.io or rollbar.com. Consisting of a series of watchers keeping an eye on model changes, log entries, and route requests, Larametrics alerts you through email or Slack when one of your notification triggers is met.
The documentation describes a few notification examples:
Email me when a notice or info message is logged
Alert me through Slack and email when an error is logged
Let me know when an Admin model is created or deleted
Tell me when someone visits the /auth/login route
</p>
<div class="links">
<a href="/">Home</a>
<a href="/about">about</a>
<a href="/news">News</a>
</div>
</div>
</div>
</body>
</html>
```
### 總結
這節簡單的介紹了 `Laravel` 框架的基本路由使用，需要在web瀏覽器中看見我們想要呈現的頁面，需要兩個步驟：
1. 在 `routes/web.php` 定義web頁面路由
2. 在 `resources/views` 下創建對應路由的視圖文件
