Nuxt3学习

1 路由

配置pages文件，nuxt会自动创建路径的映射关系

动态路由

//配置文件名为XXX-[参数].vue的形式
<NuxtLink to="/user-24">	//这个24就是传过来的参数

//传递多个参数需要配置嵌套路由
<NuxtLink to="/user-xie/user-24">

嵌套页面

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

在parent.vue中使用NuxtChild引入子路由页面

插槽

在layout中的任意一个文件中加入slot，需要充当插槽的组件配置NuxtLayout，并带上name

注意：如果在layouts中文件名包含大写，则在那么中需要改成驼峰形式

//匹配多个插槽,文件名为default.vue
<slot name="one"></slot>
<slot name="two"></slot>


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

将需要调用的公共函数放在composables文件夹下，这样调用时就不需要引入

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})

路由中间件

当从一个页面跳转到另一个页面时，在跳转过程执行的代码

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

export default defineNuxtRouteMiddle((to,from)=>{
	abortNavigation()//放弃访问
	navigateTo()	//访问另一个页面
})

//如果中间件只对单个组件起作用，在组件中如下配置
definePageMeta({
middleware:["default"]
})