这是我参与「第五届青训营 」伴学笔记创作活动的第 16 天
页面刷新或转跳后，页面停留在之前滚动位置
History.scrollRestoration - Web API 接口参考 | MDN (mozilla.org)
其实浏览器提供了原生的 API ，滚动后每次都回到顶部。
stackoverflow.com/questions/6…
The router property lets you customize Nuxt router. (vue-router ).
nuxt3表示还不支持回到顶部。
Nuxt - The router Property (nuxtjs.org)
~/app/router.scrollBehavior.ts
import type { RouterOptions } from '@nuxt/schema';
export default <RouterOptions>{
scrollBehavior() {
return { top: 0 };
},
};
动态绑定作者的level图片
以往vue中绑定图片
:src="require(`~/assets/img/lv/lv-${authorInfo.level}.png`)"
nuxt3不支持require
:src="`~/assets/img/lv/lv-${authorInfo.level}.png`"
服务器上运行时图片无法显示，而且图片地址不正确
nuxt使用assests/与public/目录来处理css样式，字体，图片等资产。
assests/用于添加将由构建工具（Webpack或Vite）处理的所有网站资产。public/用于添加将由服务器提供的资产。
Nuxt3中获取数据的方法
- 数据获取的方法：useAsyncData ，useLazyAsyncData ，useFetch ，useLazyFetch（注意：他们只能在setup或者是生命周期钩子中使用）；
- 跨组件状态共享 useState （useState 仅在 setup 和 生命周期钩子 中生效） ；
- 访问运行时配置 useRuntimeConfig （useRuntimeConfig 仅在 setup函数 或 生命周期钩子 内有效）（注意：客户端和服务器端的行为是不同的）；
获取服务器的URL
import { useRuntimeConfig } from '#imports';
const runtimeConfig = useRuntimeConfig();
<img
class="rank"
:src="`${runtimeConfig.app.baseURL}img/lv/lv-${authorInfo.level}.png`"
:alt="authorInfo.level"
/>
使用NuxtLink转跳路由变更但是页面未刷新
to="nuxtjs.org" to链接行，
:to="`/article/${i.id}`" 不行
<a :href="`${runtimeConfig.app.baseURL}article/${i.id}`">
<div class="article-title show-title" :title="i.title">{{ i.title }}</div>
<div class="article-meta">{{ i.like }}点赞 · {{ i.view }}评论</div>
</a>
Nuxt3配置不同开发环境
- 多个开发环境：根目录下创建env文件夹，文件夹中创建需要配置不同环境的.env.名字
- 单个开发环境：根目录下创建 .evn 文件
