Nuxt3 learning

1 路由

配置pages文件,nuxtThe mapping relationship of the path is automatically created

动态路由

//配置文件名为XXX-[参数].vue的形式
<NuxtLink to="/user-24">	//这个24is the passed parameter

//Passing multiple parameters requires configuring nested routes
<NuxtLink to="/user-xie/user-24">

嵌套页面

同级创建parent和parent.vue,在parent文件夹中创建child.vue

在parent.vue中使用NuxtChildIntroduce sub-routing pages

插槽

在layoutto any file in the slot,Requires component configuration to act as a slotNuxtLayout,并带上name

//Match multiple slots,文件名为default.vue
<slot name="one"></slot>
<slot name="two"></slot>


<NuxtLayout name="default">
	<template #one></template>
	<template #two></template>
<NuxtLayout>

Put the public functions that need to be calledcomposables文件夹下,This way you don't need to import it when you call it

Nuxt3请求数据的方法

（1）useAsyncData

const res=await useAsyncData('getList',()=>$fetch(url),{
    Lazy:true})

const list=res.data._rawValue.data

（2）useFetch

const res=await useFetch(url,{
    method:'get',id:1})

路由中间件

When jumping from one page to another,The code executed during the jump process

//建立middleware文件夹,在文件夹下新建default.global.ts文件

export default defineNuxtRouteMiddle((to,from)=>{
    
	abortNavigation()//give up access
	navigateTo()	//Visit another page
})

//If the middleware only works on a single component,Configure as follows in the component
definePageMeta({
    
middleware:["default"]
})