模塊化代碼
nuxt3中的模塊化代碼composables文件夾碎紊。共用的方法寫(xiě)在里面可以自動(dòng)導(dǎo)入到頁(yè)面佑附,組件插件當(dāng)中。
寫(xiě)一個(gè)獲取當(dāng)前時(shí)間的方法仗考。首先在根目錄下創(chuàng)建composables文件夾音同,然后新建time.ts文件。寫(xiě)一個(gè)方法getTime()
在pages目錄下新建demotime.vue文件秃嗜,引用getTime方法权均。
模塊化代碼有一定的限制,比如在composables目錄下新建一個(gè)test文件夾锅锨,在test目錄下智能新建名為index的ts文件叽赊,用其他的名字在頁(yè)面內(nèi)無(wú)法引用方法并且會(huì)報(bào)錯(cuò)。
服務(wù)端請(qǐng)求數(shù)據(jù)
nuxt中頁(yè)面渲染常用的四種方法必搞,主要用前兩種:
·? useAsyncData
·? useFetch
·? useLazyFetch
·? useLazyAsyncData
在pages目錄下新建demotwo.vue文件必指,用useAsyncData方法或者useFetch方法請(qǐng)求參數(shù)。
const res = await useAsyncData("getList", () =>$fetch("請(qǐng)求接口的地址"));
const res = await useFetch("請(qǐng)求接口地址",{method:'get'});
兩種方法的寫(xiě)法相似恕洲,有一點(diǎn)區(qū)別塔橡,需要注意區(qū)分。
中間件的使用&路由
從一個(gè)頁(yè)面跳到另一個(gè)頁(yè)面霜第,在跳轉(zhuǎn)過(guò)程中執(zhí)行一些代碼葛家。
在根目錄下新建middleware文件夾,新建default.global.ts文件(全局配置)泌类,default.ts文件