13 nuxt3学习（新建页面 内置组件 assets 路由）

新建页面

Nuxt项目中的页面是在 pages目录 下创建的

• 在pages目录创建的页面，Nuxt会根据该页面的目录结构和其文件名来自动生成对应的路由。
• 页面路由也称为文件系统路由器（file system router），路由是Nuxt的核心功能之一

方式一：手动创建(文件与文件夹方式均可以)

方式二：命令行创建
npx nuxi add page home # 创建home页面（单文件）
npx nuxi add page detail/[id] # 创建detail页面（文件夹）
npx nuxi add page user-[role]/[id] # 创建user页面

内置组件

Nuxt3 框架也提供一些内置的组件，常用的如下：

1. SEO组件： Html、Body、Head、Title、Meta、Style、Link、NoScript、Base
2. NuxtWelcome：欢迎页面组件，该组件是 @nuxt/ui的一部分
3. NuxtLayout：是 Nuxt 自带的页面布局组件
4. NuxtPage：是 Nuxt 自带的页面占位组件
   • 需要显示位于目录中的顶级或嵌套页面 pages/
   • 是对 router-view 的封装
5. ClientOnly：该组件中的默认插槽的内容只在客户端渲染
   • 而fallback插槽的内容只在服务器端渲染
6. NuxtLink：是 Nuxt 自带的页面导航组件
   • 是 Vue Router组件 和 HTMLa标签的封装。
7. 等等

assets

资源目录

Nuxt使用两个目录来处理像stylesheets, fonts 或 images这样的资产。

• public/目录内容原样提供给服务器根目录。
• assets/目录按惯例包含你想要构建工具(Vite或webpack)处理的每个资产。

public

1. 用作静态资产的公共服务器，可在应用程序上直接通过 URL 直接访问
2. 比如：引用public/img/ 目录中的图像文件
   • 在静态 URL 中可用 /img/nuxt.png，如下图
   • 静态的URL也支持在背景中使用

<template><img src='/img/nuxt.png'/>
</template>

assets

1. assets经常用于存放如样式表、字体或 SVG的资产
2. 可以使用 ~/assets/ 路径引用位于assets目录中的资产文件
3. ~/assets/ 路径也支持在背景中使用

<template><img src='~/assets/img/nuxt.png'/>
</template>

全局css样式

1. 手动导入

<style scoped lang="scss">
/* 1.手动导入全局样式 */
/* @import "~/assets/styles/variables.scss"; */// as vb: 给这个模块起一个命名空间
// as * : 可以省略命名空间
// @use 和 @import
/* @use "~/assets/styles/variables.scss" as bv; */
/* @use "~/assets/styles/variables.scss" as *; */.local-style {/* color: vb.$fsColor; */color: $fsColor;font-size: $fs20;@include border();
}
</style>

2. nuxt.config配置

css:您可以定义要全局设置的CSS文件/模块/库（包含在每个页面中）。
Nuxt将根据其扩展名自动猜测文件类型，并使用适当的预处理器。如果需要使用它们，您仍然需要安装所需的加载器。
vite: 要在Nuxt组件样式中全局插入语句，可以使用nuxt.config 文件中的Vite选项。

export default defineNuxtConfig({css: ["@/assets/styles/main.css","@/assets/styles/global.scss","@/assets/cus-font/iconfont.css", // 自定字体图标],vite: {css: {preprocessorOptions: {scss: {// 自动的给  scss 模块首行添加额外的数据:@use "@/assets/styles/variables.scss" as *;additionalData: '@use "@/assets/styles/variables.scss" as *;',},},},},
});

字体图标

1. 将字体图标存放在assets目录下
2. 字体文件可以使用 ~/assets/ 路径引用。
3. 在nuxt.config配置文件中导入全局样式
4. 在页面中就可以使用字体图标了

// assets/cus-font/iconfont.css
@font-face {font-family: "iconfont"; /* Project id  */src: url("~/assets/cus-font/iconfont.ttf") format("truetype");
}

export default defineNuxtConfig({css: ["@/assets/cus-font/iconfont.css", // 自定字体图标],
});

路由

组件导航（NuxtLink）

1. NuxtLink是Nuxt内置组件，是对 RouterLink 的封装，用来实现页面的导航。
   • 该组件底层是一个标签，因此使用 a + href 属性也支持路由导航
   • 但是用a标签导航会有触发浏览器默认刷新事件，而 NuxtLink 不会，NuxtLink还扩展了其它的属性和功能
   • 当NuxtLink进入客户端的视口时，Nuxt将自动提前预取链接页面的组件和有效载荷(生成的页面)，从而实现更快的导航。
2. 应用Hydration后（已激活，可交互），页面导航会通过前端路由来实现。这可以防止整页刷新,并允许动画过渡。
3. 当然，手动输入URL后，点击刷新浏览器也可导航，这会导致整个页面刷新
4. NuxtLink 组件属性：
   • to：支持路由路径、路由对象、URL
   • href：to的别名
   • activeClass：激活链接的类名
   • target：和a标签的target一样，指定何种方式显示新页面
   • 等等

<NuxtLink to="/">index</NuxtLink>
<NuxtLink to="/home">home</NuxtLink>

编程导航（navigateTo）

navigateTo 函数在服务器端和客户端都可用，也可以在插件、中间件中使用，也可以直接调用以执行页面导航，例如：

• 当用户触发该goToProfile()方法时，我们通过navigateTo函数来实现动态导航。
• 建议： goToProfile方法总是返回 navigateTo 函数（该函数不需要导入）或 返回异步函数

navigateTo( to , options) 函数:

• to: 可以是纯字符串 或 外部URL 或 路由对象
• options: 导航配置，可选
  • replace：默认为false，为true时会替换当前路由页面
  • external：默认为false，不允许导航到外部连接，true则允许
  • 等等

function goToCategory() {return navigateTo("/category");
}
function gotoCategory2() {return navigateTo({path: "/category",query: {id: 200,},},{replace: true, // 是否是替换当前的页面});
}
function gotoCategory2() {return navigateTo("https://www.jd.com", {external: true,});
}

编程导航（useRouter）

Nuxt3z中的编程导航除了可以通过 navigateTo 来实现导航，同时也支持 useRouter ( 或 Options API 的 this.$router )
useRouter常用的API

• back：页面返回，和 一样 router.go(-1)
• forward：页面前进，同 router.go(1)
• go：页面返回或前进，如 router.go(-1) or router.go(1)
• push：以编程方式导航到新页面。建议改用 navigateTo 。支持性更好
• replace：以编程方式导航到新页面，但会替换当前路由。建议改用 navigateTo 。支持性更好
• beforeEach：路由守卫钩子，每次导航前执行（用于全局监听）
• afterEach：路由守卫钩子，每次导航后执行（用于全局监听）
• …

// useRouter
let router = useRouter();
function goToCart() {router.push("/cart"); // navigateTo
}
function goBack() {router.go(-1);
}// 路由的守卫
router.beforeEach((to, form) => {console.log(to);console.log(form);
});

动态路由

Nuxt3 和 Vue一样，也是支持动态路由的，只不过在Nuxt3中，动态路由也是根据目录结构和文件的名称自动生成
动态路由语法：

• 页面组件目录 或 页面组件文件都 支持 [ ] 方括号语法
• 方括号里编写动态路由的参数

例如

• pages/detail/[id].vue -> /detail/:id
• pages/detail/user-[id].vue -> /detail/user-:id
• pages/detail/[role]/[id].vue -> /detail/:role/:id
• pages/detail-[role]/[id].vue -> /detail-:role/:id

动态路由 和 index.vue 能同时存在， Next.js也可以

如果有类型报错 删除.nuxt文件

npm run postinstall

路由参数

动态路由参数

• 通过 [] 方括号语法定义动态路由，比如：/detail/[id].vue
• 页面跳转时，在URL路径中传递动态路由参数，比如：/detail/10010
• 目标页面通过 route.params 获取动态路由参数

查询字符串参数

• 页面跳转时，通过查询字符串方式传递参数，比如：/detail/10010?name=liujun
• 目标页面通过 route.query 获取查询字符串参数

<script lang="ts" setup>
// 拿到动态路由的参数
const route = useRoute();
const { id } = route.params;
const { name } = route.query;
</script>

404页面

捕获所有不配路由（即 404 not found 页面）

• 通过在方括号内添加三个点 ，如：[…slug].vue 语法，其中slug可以是其它字符串。
• 除了支持在 pages根目录下创建，也支持在其子目录中创建。
• 在pages根目录下创建匹配所有404页面
• 在子目录下创建仅匹配当前路由后的，比如 在pages/detail/[…slug].vue 仅匹配 /detail/{没有的页面}
  

路由匹配规则

预定义路由优先于动态路由，动态路由优先于捕获所有路由。请看以下示例：

1. 预定义路由：pages/detail/create.vue
   • 将匹配 /detail/create
2. 动态路由：pages/detail/[id].vue
   • 将匹配/detail/1, /detail/abc 等。
   • 但不匹配 /detail/create 、/detail/1/1、/detail/ 等
3. 捕获所有路由：pages/detail/[…slug].vue
   • 将匹配 /detail/1/2, /detail/a/b/c 等。
   • 但不匹配 /detail 等

嵌套路由

Nuxt 和 Vue一样，也是支持嵌套路由的，只不过在Nuxt中，嵌套路由也是根据目录结构和文件的名称自动生成。
编写嵌套路由步骤：

1. 创建一个一级路由，如：parent.vue
2. 创建一个与一级路由同名同级的文件夹，如： parent
3. 在parent文件夹下，创建一个嵌套的二级路由
   • 如：parent/child.vue， 则为一个二级路由页面
   • 如： parent/index.vue 则为二级路由默认的页面
4. 需要在parent.vue中添加 NuxtPage 路由占位