Zengtudor/Nuxt
1
0
Fork 0
mirror of https://github.com/nuxt/nuxt.git synced 2024-11-25 15:15:19 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat(nuxt): allow dynamic scrollToTop page meta (#21741)

Browse Source
This commit is contained in:
Prashant Palikhe 2023-07-30 12:07:01 +02:00 committed by GitHub
parent fc10da37fb
commit 2616aadda6
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 11 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
docs/3.api/3.utils/define-page-meta.md
View File

@ -32,6 +32,7 @@ interface PageMeta {
keepalive?: boolean | KeepAliveProps keepalive?: boolean | KeepAliveProps
layout?: false | LayoutKey | Ref<LayoutKey> | ComputedRef<LayoutKey> layout?: false | LayoutKey | Ref<LayoutKey> | ComputedRef<LayoutKey>
middleware?: MiddlewareKey | NavigationGuard | Array<MiddlewareKey | NavigationGuard> middleware?: MiddlewareKey | NavigationGuard | Array<MiddlewareKey | NavigationGuard>
scrollToTop?: boolean | ((to: RouteLocationNormalizedLoaded, from: RouteLocationNormalizedLoaded) => boolean)
[key: string]: unknown [key: string]: unknown
} }
``` ```
@ -98,6 +99,12 @@ interface PageMeta {
Validate whether a given route can validly be rendered with this page. Return true if it is valid, or false if not. If another match can't be found, this will mean a 404. You can also directly return an object with `statusCode`/`statusMessage` to respond immediately with an error (other matches will not be checked). Validate whether a given route can validly be rendered with this page. Return true if it is valid, or false if not. If another match can't be found, this will mean a 404. You can also directly return an object with `statusCode`/`statusMessage` to respond immediately with an error (other matches will not be checked).
**`scrollTopTop`**
- **Type**: `boolean | (to: RouteLocationNormalized, from: RouteLocationNormalized) => boolean`
Tell Nuxt to scroll to the top before rendering the page or not. If you want to overwrite the default scroll behavior of Nuxt, you can do so in `~/app/router.options.ts` (see [docs](/docs/guide/directory-structure/pages/#router-options)) for more info.
**`[key: string]`** **`[key: string]`**
- **Type**: `any` - **Type**: `any`

2
packages/nuxt/src/pages/runtime/composables.ts
View File

@ -36,7 +36,7 @@ export interface PageMeta {
/** You may define a path matcher, if you have a more complex pattern than can be expressed with the file name. */ /** You may define a path matcher, if you have a more complex pattern than can be expressed with the file name. */
path?: string path?: string
/** Set to `false` to avoid scrolling to top on page navigations */ /** Set to `false` to avoid scrolling to top on page navigations */
scrollToTop?: boolean scrollToTop?: boolean | ((to: RouteLocationNormalizedLoaded, from: RouteLocationNormalizedLoaded) => boolean)
} }
declare module 'vue-router' { declare module 'vue-router' {

4
packages/nuxt/src/pages/runtime/router.options.ts
View File

@ -20,8 +20,10 @@ export default <RouterConfig> {
// savedPosition is only available for popstate navigations (back button) // savedPosition is only available for popstate navigations (back button)
let position: ScrollPosition = savedPosition || undefined let position: ScrollPosition = savedPosition || undefined
const routeAllowsScrollToTop = typeof to.meta.scrollToTop === 'function' ? to.meta.scrollToTop(to, from) : to.meta.scrollToTop
// Scroll to top if route is changed by default // Scroll to top if route is changed by default
if (!position && from && to && to.meta.scrollToTop !== false && _isDifferentRoute(from, to)) { if (!position && from && to && routeAllowsScrollToTop !== false && _isDifferentRoute(from, to)) {
position = { left: 0, top: 0 } position = { left: 0, top: 0 }
} }