Javascript Vue路由器异步加载url
我有一个Laravel后端,在那里我可以管理我的URL 在前面,我将Vuejs与vue路由器一起使用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
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()中