Javascript Vue路由器异步加载url

Javascript Vue路由器异步加载url,javascript,vue.js,vue-router,Javascript,Vue.js,Vue Router,我有一个Laravel后端,在那里我可以管理我的URL 在前面,我将Vuejs与vue路由器一起使用 export default [ { path: Vue.prototype.$routes.home, name: 'home', component: Views.Home, breadcrumb: [] }, { path: Vue.prototype.$routes.forgotten

我有一个Laravel后端,在那里我可以管理我的URL

在前面,我将Vuejs与vue路由器一起使用

export default [
    {
        path: Vue.prototype.$routes.home,
        name: 'home',
        component: Views.Home,
        breadcrumb: []
    },
    {
        path: Vue.prototype.$routes.forgotten_password,
        name: 'forgottenPassword',
        component: Views.ForgottenPassword,
        meta: {
            requiresVisitor: true,
            breadcrumb: [
                { name: 'Home', link: '/' },
                { name: 'Forgotten password' }
            ]
        }
    }
]
main.js中的第一个

    import EstarterSettings from './plugins/EstarterSettings'
    import router from './router'
然后我尝试使用一个插件在插件中加载我的路由

    import {RestDataSourcesMixin} from '../mixins/RestDataSourcesMixin'

    export default  {
        async install(Vue, options) {
        Vue.prototype.$routes = await 
                RestDataSourcesMixin.methods.requestApi(`/api/get-routes`)
        }
    };
现在,我想在我的vue路由器中使用此路由

export default [
    {
        path: Vue.prototype.$routes.home,
        name: 'home',
        component: Views.Home,
        breadcrumb: []
    },
    {
        path: Vue.prototype.$routes.forgotten_password,
        name: 'forgottenPassword',
        component: Views.ForgottenPassword,
        meta: {
            requiresVisitor: true,
            breadcrumb: [
                { name: 'Home', link: '/' },
                { name: 'Forgotten password' }
            ]
        }
    }
]
但由于异步,路由未定义

我如何等待路线装货,或者有什么方法可以做到这一点

非常感谢

编辑

由于这个链接,我能够解决我的问题。它完全符合我想要的:

编辑2

我找到了另一种方法。 在vuejs应用程序之前,将我的路由设置为html布局中的全局变量

<script>
    window.appSettings = {
        routes : {{\app\Http\Controllers\Front\System\EstarterSettingController::getRoutes()}},
        settings: {{\app\Http\Controllers\Front\System\EstarterSettingController::getSettings()}}
    }
</script>
<script src="{{ mix('js/main.js') }}"></script>

window.appSettings={
路由:{{\app\Http\Controllers\Front\System\EstarterSettingController::getRoutes()}},
设置:{{\app\Http\Controllers\Front\System\EstarterSettingController::getSettings()}}
}

您尝试过使用.then()方法吗?@Ckuessner我们无法将导入放入then()您尝试过使用.then()方法吗?@Ckuessner我们无法将导入放入then()中