laravel 和 vue SPA 应用程序中的多个入口网络路由

Posted 2023-02-22

技术标签:

【中文标题】laravel 和 vue SPA 应用程序中的多个入口网络路由【英文标题】：multiple entry web routes in laravel and vue SPA app 【发布时间】：2018-09-15 04:40:57 【问题描述】：

我正在使用 laravel 后端和 vue 在前端创建一个应用程序。我在 web.php 文件中需要 3 个单独的 SPA 入口路由（每个用于访客用户、注册用户和管理员用户），如下所示：

Route::get('/', function() 
    return view('guest.index');
);

Route::any('/admin/any', function () 
    return view('dashboard.admin.dashboard');
)->where(['any', '.*']);

Route::get('/any', function() 
    return view('user.dashboard');
)->where('any',  '((?!(api)).)*');

我的 app.js 文件如下所示：

require('./bootstrap');

import Vue from 'vue'
import router from './routes/index'

export const eventBus = new Vue();

// using vue-router
import VueRouter from 'vue-router'
import  routes  from "./routes";
import axios from 'axios';

Vue.use(VueRouter)

import Guest from './pages/Guest.vue';

// Entry point for Users
import Dashboard from './pages/Dashboard.vue';

// Admin pages
import Admin from './components/admin/vuelayouts/Admin.vue';

if (document.getElementById('dashboard')) 
    const dashboard = new Vue(
        el: '#dashboard',
        components: 
            Dashboard
        ,
        router
    );


if (document.getElementById('guest')) 
    const guest = new Vue(
        el: '#guest',
        components: 
            Guest
        ,
        router
    );


if (document.getElementById('admin')) 
    Vue.component('admin', Admin);

    Vue.component('paginate', Paginate);
    Vue.use(VueFlashMessage);

    const dashboard = new Vue(
        el: '#adminapp',
        components: 

        ,
        router
    );

到目前为止，这行不通。我只能访问访客和用户页面，但无法访问管理页面。使用 if-blocks 访问不同的路由是最好的方法吗？请问有什么想法吗？

【问题讨论】：

你不能从 Vue 路由器上搭载并从你的控制器将它们重定向到 url('/#/admin') 吗？你的 Vue 代码不应该像那样重复。而且我看到您导入了您的路线，但您从未将它们附加到您的路由器。您应该阅读有关如何执行此操作的文档。 【参考方案1】：

'/admin/any' 和 '/any' 路由可能会发生冲突，就像您输入 /admin/ 它会将您路由到 /any。您能否暂时使用不同的路由 URI 进行测试，以确认不是因为这个原因？

至于 Vue 部分，使用single file components 不是更有意义。这样您就不需要通过 ID 检查元素是否存在，只需将 SFC 拖放到刀片模板中，如下所示：