Question

我有一个Laravel后端，可以在其中管理我的Urls。

在前面，我将Vuejs与vue-router一起使用

首先是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-router中使用此路由

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' }
            ]
        }
    }
]

但是导致异步，路由未定义

我如何等待路由加载？有没有办法做到这一点？

非常感谢

修改

借助此链接，我能够解决我的问题。它完全符合我的需求：

How to load all server side data on initial vue.js / vue-router load?

编辑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>

Vue路由器异步加载URL

0 个答案: