在laravel10+框架中使用vant4实现多个单页面路由

Laravel  /  管理员 发布于 1年前   346

laravel10 + vant4实现多个单页面路由流程步骤


1.Vue 组件

为每个 SPA 创建 Vue 组件。

将它们放在 resources/js/components 目录中。

Spa1Component.vue：

<template>
  <div>
    <h1>SPA 1</h1>
    <!-- SPA 1 Content Here -->
  </div>
</template>
<script>
export default {
  // SPA 1 Script
};
</script>



Spa2Component.vue：

<template>
  <div>
    <h1>SPA 2</h1>
    <!-- SPA 2 Content Here -->
  </div>
</template>
<script>
export default {
  // SPA 2 Script
};
</script>



2. 主要 JavaScript 文件

在 中 resources/js/app.js，根据数据属性动态导入组件。

import { createApp } from 'vue';
document.addEventListener('DOMContentLoaded', () => {
  const appDiv = document.getElementById('app');
  const componentName = appDiv.dataset.component;
  import(`./components/${componentName}.vue`).then((module) => {
    createApp(module.default).mount('#app');
  });
});



3. blade模板

创建一个将动态加载不同组件的 Blade 模板。

资源 / 视图 /app.blade.php：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>SPA</title>
</head>
<body>
    <div id="app" data-component="{{ $componentName }}"></div>
    @vite('resources/js/app.js')
</body>
</html>



4. Laravel 路线

设置路由以 routes/web.php 将适当的组件名称传递给视图。

use Illuminate\Support\Facades\Route;
Route::get('/spa1', function () {
    return view('app', ['componentName' => 'Spa1Component']);
});
Route::get('/spa2', function () {
    return view('app', ['componentName' => 'Spa2Component']);
});

此设置允许您维护单个入口点 ( app.js)，同时根据路由动态加载不同的组件，

从而使多个 SPA 的管理更简单、更集中。


  • 上一条：
    在laravel10+框架中使用vant4库流程步骤
    下一条：
    为PHP引入Python生态之phpy：PHP与Python互调用库，PHP也可以写AI了

    • 昵称：

    邮箱：

    0条评论 (评论内容有缓存机制,请悉知!)
    Top

    Copyright·© 2019 侯体宗版权所有· 粤ICP备20027696号 PHP交流群

    侯体宗的博客