使用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 协议》,转载必须注明作者和本文链接
《L02 从零构建论坛系统》
以构建论坛项目 LaraBBS 为线索,展开对 Laravel 框架的全面学习。应用程序架构思路贴近 Laravel 框架的设计哲学。
《L05 电商实战》
从零开发一个电商项目,功能包括电商后台、商品 & SKU 管理、购物车、订单管理、支付宝支付、微信支付、订单退款流程、优惠券等
讨论数量: 4

还不错,如果是react,就好了!

1个月前 评论

第三步 resouces/js/Pages 目录新增 PageA.vue 和 PageB.vue
该 resouces/js/Pages 目录配置,见作者《laravel安装inertia vue3的版本》

3.2 第二步:初始化应用
打开 /resouces/js/app.js,清空后覆盖以下代码

import { createApp, h } from 'vue'
import { createInertiaApp } from '@inertiajs/inertia-vue3'
createInertiaApp({
  resolve: name => require(`./Pages/${name}`),
  setup({ el, app, props, plugin }) {
    createApp({ render: () => h(app, props) })
      .use(plugin)
      .mount(el)
  },
})
1周前 评论

讨论应以学习和精进为目的。请勿发布不友善或者负能量的内容,与人为善,比聪明更重要!