Question

我正在前端创建一个带有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访问不同的路由，最好的方法是什么？有什么想法吗？

Answer 1

“/ admin / {any}”和“/ {any}”路由可能会发生冲突，就好像您输入/ admin /它会将您路由到/ {any}。您可以暂时使用不同的路由URI进行测试，以确认它不是由于那个吗？

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

<admin></admin>

将剩下的代码移到单个文件组件中。

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

1 个答案: