使用laravel inertia開發體驗頁面

赤三禾發表於2021-12-21
Laravel

上一篇laravel安裝inertia vue3的版本安裝了inertia的擴充套件，執行2個頁面體驗下。
優先執行

$ npm run watch

第一步 使用artisan命令建立Page控制器

$ php artisan make:controller PageController

第二步 新增2個頁面的路由

Route::get('page-a', [PageController::class, 'PageA']);
Route::get('page-b', [PageController::class, 'PageB']);

第三步 控制器增加程式碼

<?php

namespace App\Http\Controllers;

use App\Models\User;

class PageController extends Controller
{
    public function pageA()
    {
        $aTemplateDatas = [
            1,
            2,
            3,
            4,
        ];
        return inertia('PageA', ['tempDatas' => $aTemplateDatas]);
    }

    public function pageB()
    {
        return inertia('PageB');
    }
}

第三步 resouces/js/Pages目錄新增PageA.vue和PageB.vue。

PageA.vue程式碼

<template>
    A頁面
    <ul>
        <li v-for="(key, index) in tempDatas">
            {{ index }} ==== {{ key }}
        </li>
    </ul>
<Link  href="/page-b">重定向到B頁面</Link >

</template>

<script>
    import { Link } from '@inertiajs/inertia-vue3'
    export default {
        components: {
          Link,
        },
        props: {
            tempDatas:Array,
        }
    };
</script>

PageB.vue程式碼

<template>
    B頁面
    <ul>
        <li v-for="(key, index) in tempDatas">
            {{ index }} ==== {{ key }}
        </li>
    </ul>
    <Link  href="/page-a">重定向到A頁面</Link >
</template>

<script>
    import { Link } from '@inertiajs/inertia-vue3'
    export default {
        components: {
            Link,
        }
    };
</script>

第四步 執行並訪問 

$ php artisan serve

訪問：127.0.0.1:8000/page-a
訪問：127.0.0.1:8000/page-b

整體的體驗還是不錯的，頁面無重新整理。
pingcam官方示例demo-inertia.zhitiantu.com/login

本作品採用《CC 協議》，轉載必須註明作者和本文連結

相關文章