vue-路由器在动态导入组件时不呈现组件
vue-路由器在动态导入组件时不呈现组件
提问于 2020-12-07 22:46:03
我使用的是vue路由器，在动态导入时注册组件有问题。
如果我使用基本的硬编码代码，路由器就会正常工作。但是，如果我动态地加载我的路由，它就无法呈现我的组件。
动态导入组件文件：
GetAllPages((data) => {
let pages = [];
data.map(page => {
const pageTitle = page.title.rendered.toLowerCase();
import(`../pages/${pageTitle}.js`).then(module => {
pages.push({
path: `/${pageTitle}`,
name: `${pageTitle}`,
component: module.default
})
})
})
return pages;
})路由器功能：
new VueRouter({
mode: 'history',
// routes: pages <= not registering data
routes: [
{path: '/about', component: About} // <= working fine
]
});动态导入文件：
let AboutPage = {
data: () => ({
Message: "hey"
}),
render: () => {
return "<h1>{{Message}}</h1>";
}
}
export default Vue.component("About", {
data: AboutPage.data,
template: AboutPage.render()
})问题是硬编码的路由将工作，而动态导入的页面则不能工作。即使我硬编码data.map函数中动态导入的值，它也不会呈现出我的页面。控制台中的路由器没有错误。
PS:如果我console.log路由器实例，就会设置动态导入的路由。但没有渲染html。
回答 1
Stack Overflow用户
回答已采纳
发布于 2020-12-07 23:49:12
你有两个选择..。
- 在创建路由器之前，等待您的所有导入解决。这将涉及推迟根Vue实例的创建。
- 使用延迟加载组件创建路由器。
我建议备选方案2
new VueRouter({
mode: 'history',
routes: data.map(page => { // data as defined in your GetAllPages function
const pageTitle = page.title.rendered.toLowerCase()
return {
path: `/${pageTitle}`,
name: pageTitle,
component: () => import(`../pages/${pageTitle}.js`)
}
})
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/65190550
复制相关文章
相似问题
腾讯云开发者
