使用laravel inertia开发体验页面

上一篇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 协议》，转载必须注明作者和本文链接