模块化代码
nuxt3中的模块化代码composables文件夹。共用的方法写在里面可以自动导入到页面,组件插件当中。
写一个获取当前时间的方法。首先在根目录下创建composables文件夹,然后新建time.ts文件。写一个方法getTime()
在pages目录下新建demotime.vue文件,引用getTime方法。
模块化代码有一定的限制,比如在composables目录下新建一个test文件夹,在test目录下智能新建名为index的ts文件,用其他的名字在页面内无法引用方法并且会报错。
服务端请求数据
nuxt中页面渲染常用的四种方法,主要用前两种:
· useAsyncData
· useFetch
· useLazyFetch
· useLazyAsyncData
在pages目录下新建demotwo.vue文件,用useAsyncData方法或者useFetch方法请求参数。
const res = await useAsyncData("getList", () =>$fetch("请求接口的地址"));
const res = await useFetch("请求接口地址",{method:'get'});
两种方法的写法相似,有一点区别,需要注意区分。
中间件的使用&路由
从一个页面跳到另一个页面,在跳转过程中执行一些代码。
在根目录下新建middleware文件夹,新建default.global.ts文件(全局配置),default.ts文件