Nuxt3 插件实现Nuxt 3页面跳转自动滚动到顶部

本教程详细解释了如何在基于Nuxt 3和Vue 3的项目中创建一个自定义路由插件。该插件主要用于修改路由的滚动行为，使得每次页面跳转时，浏览器视窗都自动滚动到顶部。这一操作在单页应用（SPA）中尤其有用。

文件和目录结构

1. 确保项目中有一个名为plugins的目录。
2. 在plugins目录下创建一个名为router.ts的文件。

引入依赖和定义接口

1. 引入vue-router库中的Router类。
2. 定义一个扩展自Router的接口CustomRouter，添加可选的running和nextRoute属性。

import {Router} from 'vue-router';

interface CustomRouter extends Router {
    running?: boolean;
    nextRoute?: string | null;
}

插件创建与初始化

1. 使用defineNuxtPlugin函数定义Nuxt插件。
2. 在插件回调中，使用useNuxtApp().$router获取当前路由对象，并将其类型强制转换为CustomRouter。

export default defineNuxtPlugin((nuxtApp) => {
    const customRouter: CustomRouter = <CustomRouter>useNuxtApp().$router;
    // ...
});

自定义路由行为

1. 修改customRouter.options.scrollBehavior，设置一个返回值为{ left: 0, top: 0 }的函数。

customRouter.options.scrollBehavior = () => {
    return { left: 0, top: 0 }
};

这样，每当进行页面跳转时，页面将自动滚动到顶部，以提供更好的用户体验。

更多关于Nuxt开发技巧可访问 【鱼七博客】