主页 / 问题 / 1036750
Accepted
Pavel
Asked:2020-10-21 02:41:21 +0000 UTC2020-10-21 02:41:21 +0000 UTC

如何将 spa 与 mpa 应用程序结合使用

  • 772

我正在编写一个用于预订的 Web 应用程序，将 Lara 用于这项业务。然后出现了一个想法，将管理面板归档为 spa，项目的其余部分将类似于 mpa。是否可以在一个域上实现这一点？也就是我们访问http://site.ru/admin的时候，那么在 /admin/.../ 之后形成的所有路由，考虑到历史的保存，都会使用 js 框架来处理就我而言，路由器是vue。可以剪这样的东西吗？现在我收到 404 错误，因为这些路由将处理 lara 核心。

laravel

1 个回答

  1. Best Answer

    路由routes/web.php：

    Route::prefix('panel')
    ->group(function () {
        // Одностраничная административная панель.
        Route::middleware([
                'auth',
            ])
            ->get('/{any?}', 'PanelController')
            ->name('panel');
    });

    控制器app\Http\Controllers\PanelController.php：

    <?php

namespace App\Http\Controllers;

class PanelController extends Controller
{
  /**
   * Единый обработчик маршрутов одностраничного приложения.
   * 
   * @return View
   */
  public function __invoke()
  {
    $scriptVariables = [
      'base_url' => route('panel'),
    ];

    return view('panel', compact('scriptVariables'));
  }
}

    资源/视图/panel.blade.php模板

    <!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">

<head>
    <title>Панель управления - {{ config('app.name') }}</title>
    <meta charset="utf-8" />
    <link rel="stylesheet" type="text/css" href="{{ mix('/css/panel.css') }}" />
</head>

<body>
    <div id="app"></div>

    <script type="text/javascript">
        window.ScriptVariables = @json($scriptVariables, JSON_PRETTY_PRINT);
    </script>

    <script src="{{ mix('/js/panel.js') }}"></script>
</body>

</html>

    Webpack.mix.js前端捆绑器说明：

    const mix = require('laravel-mix');

mix.webpackConfig({
  resolve: {
    extensions: [
      '.js',
      '.vue',
    ],

    alias: {
      '@': __dirname + '/resources/assets/js'
    }
  }
})

// Разделяем ресурсы для основного сайта
// и раздела административной панели.

.sass('resources/sass/app.sass', 'public/css')
.sass('resources/sass/panel.sass', 'public/css')

.js('resources/js/app.js', 'public/js')
.js('resources/js/panel.js', 'public/js');

    用于单页应用程序的 JavaScript resources/js/panel.js：

    'use strict';

// Подгружаем сторонние зависимости.
require('./bootstrap');

import Vue from 'vue';

// Импортируем плагины.
import store from '@/store';
import router from '@/router';

// Импортируем основной шаблон приложения.
import App from '@/views/layouts/app.vue';

// Создаем Vue приложение и подключаем к странице.
const app = new Vue({
    el: '#app',

    components: {
        'app': App
    },

    router,
    store,

    template: '<app></app>',
});

    不要忘记指定基本 URL resources/js/router/index.js：

    import Vue from 'vue';
import VueRouter from 'vue-router';

// Устанавливаем плагин глобально.
Vue.use(VueRouter);

// Импортируем маршруты.
import routes from './routes';

// Определяем базовый URL маршрутизатора.
const base_url = `${ScriptVariables.base_url}`
    .replace(/^https?:\//, '')
    .replace(/^\/localhost/, '')

// Инициализируем и экспортируем маршрутизатор.
const router = new VueRouter({
    mode: 'history',
    base: base_url,
    routes: routes,
    linkActiveClass: 'active',
    pathToRegexOptions: {
        strict: true
    },
    scrollBehavior(to, from, savedPosition) {
        return {
            x: 0,
            y: 0
        }
    },
});

export default router;
    • 5

相关问题