diff --git a/docs/note/SSR.md b/docs/note/SSR.md index 47cd9198..2f2cf3c6 100644 --- a/docs/note/SSR.md +++ b/docs/note/SSR.md @@ -255,7 +255,7 @@ Nuxt为我们扩展了Node的process对象,并为我们在浏览器环境提 ### 页面与组件 View and Component -Nuxt会自动为我们:注册组件、注册页面路由,*约定>规范* +Nuxt会自动为我们:注册组件、注册页面路由,*约定>配置* - 位于`pages/`下的页面都会被注册路由 - 路由使用内置组件NuxtPage占位,相当于router-view @@ -279,3 +279,64 @@ Nuxt3 框架提供了一些内置的组件,常用的如下: - 类似于Vue3新增的内置组件Suspence - 可以为其传入具名插槽#fallback展示组件被渲染前的加载中状态 - ServerOnly:该组件包裹的内容只会在服务端渲染 + +### 创建页面 + +文件目录即路由,,可以手动创建 也可以通过命令行快速创建页面 + +- `npx nuxi pages category/index`: 创建`pages/category/index.vue` +- `npx nuxi pages home/index`: 创建`pages/home/index.vue` +- `npx nuxi pages detail/[id]`: 创建`pages/detail/[id].vue` 动态路由 + +- 页面路由 + - 页面水合之后,页面导航会通过前端路由来实现,可以防止整页刷新 + - 当然,手动输入URL之后,点击刷新浏览器也可以导航,但这会导致整页刷新 + +#### 路由中间件 + +Nuxt提供了一个可定制的路由中间件,用来**监听路由的导航**,包括:局部和全局监听 +- 匿名中间件 + - **在页面中**,通过`definePageMeta`定义 + - 可以监听局部路由,当注册多个中间件时,会按照注册顺序执行 + - 首次访问会在双端执行,后续都**只会在客户端执行** +- 命名路由中间件 + - 在`middleware`目录下定义,会自动加载中间件 + - 首次访问会在双端执行,后续都**只会在客户端执行** +- 全局路由中间件 + - 在`middleware`目录中,需要带`.global`后缀的文件,每次路由更改会自动运行 + - 与前两者不同,**每次页面切换,双端都会执行全局中间件** + +#### 路由验证 Validate + +Nuxt支持对每个页面路由进行验证,可以通过`definePageMeta`中的`validate`数学对路由进行验证 +- validate属性接收一个回调函数,回调函数以`route`作为参数 + - 此回调返回一个布尔值,来决定是否放行路由 + - `false` 拦截路由 默认重定向到404页面 + - `true` 放行路由 正常跳转 + - 返回一个对象 + - `{ statusCode: 401 }` 返回自定义的 401 页面 验证失败 +- 可以自定义错误页面 + - 在项目根目录 新建`error.vue` + +### 页面布局 Layout + +Layout布局是页面的包装器,可以将多个页面共性的东西抽取到Layout布局中 + +例如:每个页面的页眉和页脚,这些具有共性的组件,我们可以写到一个Layout布局中 + +本质上是Vue3的``组件 +- 默认布局,创建`layouts/default.vue` + - 然后在`app.vue`中通过内置组件``使用 +- 自定义布局 + - 创建`layouts/custom-layout.vue` + - 然后在`app.vue`中,为``传入`name`属性(具名插槽) + +### 渲染模式 + +浏览器和服务器都可以解释JavaScript代码,都可以将Vue.js组件呈现为HTML元素,此过程称为渲染 +- 在客户端渲染组件为HTML元素的过程,称为客户端渲染 +- 在服务端完成这个此操作的过程,称为服务端渲染 + +而Nuxt3支持多种渲染模式 +- 之前在配置文件中提到的`ssr`选项,可以选择以SSR模式渲染,还是CSR方式渲染 +- 混合渲染模式(SSR | CSR | SSG | SWR):需要在 `routeRules` 根据每个路由动态配置渲染模式