亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

vue-router 動態導入組件時不渲染組件

vue-router 動態導入組件時不渲染組件

溫溫醬 2023-10-20 16:08:35
我正在使用 vue-router,并且在動態導入時注冊組件時遇到問題。如果我使用基本的硬編碼代碼,路由器將正常工作。但是,如果我動態加載我的路線,它將無法渲染我的組件。動態導入組件文件: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 回答

?
SMILET

TA貢獻1796條經驗 獲得超4個贊

你有兩個選擇...

  1. 等到所有導入都解決后再創建路由器。這將涉及能夠推遲根 Vue 實例的創建

  2. 使用延遲加載組件創建路由器。

我會推薦選項#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`)

? ? }

? })

});


查看完整回答
反對 回復 2023-10-20
  • 1 回答
  • 0 關注
  • 126 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號