Nuxt.js - ScrollBehavior SavedPosition = null

Question

我已经使用 Nuxt.js 和 Strapi 开发了 WebAPP，但我遇到了 ScrollBehavior SavedPosition = null 的问题。 在浏览该站点时，我想在单击浏览器中的后退按钮后转到上一页到我离开的位置。 （我希望这是有道理的） 我查看了许多示例和资源，但 savedPosition 始终为空，我不明白为什么:(

我附上下面的代码。也许有人会看到我是否做错了什么：

index.vue

<template>
    <div class="home-page">
        <banner-carousel v-if="bannerImages" :bannerImages="bannerImages" />

        <home-intro v-if="displayOnHomepage" :displayOnHomepage="displayOnHomepage" />

        <vt-chelsea-managed-home v-if="vtmanaged" :vtmanaged="vtmanaged" />

        <div class="container-max">
            <div class="row">
                <div class="col-lg-6 home-page__research-content" v-if="displayOnHomepage.researchcontent">
                    <research-card-home :displayOnHomepage="displayOnHomepage" />
                </div>

                <div class="col-lg-6 pl-0 d-none d-lg-block home-page__investing-options" v-if="displayOnHomepage.optionscontent">
                    <div class="container-max__content h-100">
                        <investing-option-card-home :displayOnHomepage="displayOnHomepage" />
                    </div>
                </div>
            </div>
        </div>

        <div class="container-separator"></div>

        <div class="container container-elements__cards">

            <div class="row">

                <div class="col-md-6 d-lg-none home-page__investing-options" v-if="displayOnHomepage.optionscontent">
                    <div class="container-long-section-content h-100">
                        <investing-option-card-home :displayOnHomepage="displayOnHomepage" />
                    </div>
                </div>

                <div class="col-md-6 col-lg-4">
                    <b-card
                        class="card-product card-light-green"
                        no-body>

                        <div class="card-light__image-container">

                            <b-card-img 
                                v-if="displayOnHomepage.investnowimage"
                                :src="getStrapiMedia(displayOnHomepage.investnowimage.formats.small.url)" 
                                :alt="'data.title'"  
                                img-top />

                        </div>

                        <b-card-body class="card-body card-light__body">

                            <nuxt-link
                                :to="'/products'"
                                class="card-title__link">
                                <h2 class="card-title">INVEST NOW</h2>
                            </nuxt-link>

                            <div
                                v-if="displayOnHomepage.investnowcontent"
                                class="card-text card-light__text" 
                                v-html="$md.render(displayOnHomepage.investnowcontent)"/>

                        </b-card-body>

                        <b-card-footer class="card-footer card-light__footer">
                            <nuxt-link
                                :to="'/products'" 
                                class="btn btn-link btn-lg">

                                <div class="btn-text">Invest now</div>
                                <div class="btn-arrow__container">
                                    <img class="btn-arrow" :src="whiteArrow" alt="Chelsea Button Arrow Icon White">
                                </div>

                            </nuxt-link>
                        </b-card-footer>

                    </b-card>
                </div>

                <div class="col-md-6 col-lg-4">
                    <b-card
                        class="card-product card-primary"
                        no-body>

                        <div class="card-light__image-container">

                            <b-card-img 
                                v-if="displayOnHomepage.viewpointimage"
                                :src="getStrapiMedia(displayOnHomepage.viewpointimage.formats.small.url)" 
                                :alt="'data.title'"  
                                img-top />

                        </div>

                        <b-card-body class="card-body card-light__body">

                            <nuxt-link
                                :to="'/documents'"
                                class="card-title__link">
                                <h2 class="card-title">Viewpoint/<br />FundReview</h2>
                            </nuxt-link>

                            <div
                                v-if="displayOnHomepage.viewpointcontent"
                                class="card-text card-light__text" 
                                v-html="$md.render(displayOnHomepage.viewpointcontent)"/>

                        </b-card-body>

                        <b-card-footer class="card-footer card-light__footer">
                            <nuxt-link
                                :to="'/documents'" 
                                class="btn btn-link btn-lg">

                                <div class="btn-text">Learn more</div>
                                <div class="btn-arrow__container">
                                    <img class="btn-arrow" :src="whiteArrow" alt="Chelsea Button Arrow Icon White">
                                </div>

                            </nuxt-link>
                        </b-card-footer>

                    </b-card>
                </div>

                <div class="col-md-6 col-lg-4">
                    <card-layout :matchCategory="{ matchCategory }" :card="displayOnHomepage.article" />
                </div>

                <div v-if="testimonials" class="col-lg-8 d-none d-md-block">
                    <div class="d-flex h-100">
                        <div class="col-12 m-auto p-0">
                            <testimonials :testimonials="testimonials" />
                        </div>
                    </div>
                </div>

                <div v-if="recommendFriend" class="col-lg-4 d-none d-md-block">
                    <card-layout :card="recommendFriend" />
                </div>

            </div>
        </div>

        <div class="container-separator"></div>

    </div>
</template>

<script>

import { getStrapiMedia } from "../utils/medias";
import { getMetaTags } from "../utils/seo";
import secondaryArrow from "../static/images/assets/Button-Arrow-Icon-Secondary.svg";
import whiteArrow from "../static/images/assets/Button-Arrow-Icon-White.svg";

export default {
    data() {
        return {
            recommendFriend: {},
            displayOnHomepage: {},
            vtmanaged: {},
            testimonials: {},
            matchCategory: { matchCategory: {} },
            bannerImages: {},
            error: null,
            secondaryArrow: secondaryArrow,
            whiteArrow: whiteArrow,
        }
    },
    async fetch() {
        try {
            this.bannerImages = await this.$strapi.$bannerimages.find();
            this.testimonials = await this.$strapi.$testimonialshomepages.find();
            this.recommendFriend = await this.$strapi.$friendrecommend.find();
            this.displayOnHomepage = await this.$strapi.$dispplayonhomepage.find();
            this.vtmanaged = await this.$strapi.$vtmanaged.find();
            this.matchCategory = await this.$strapi.$categories.find({id: this.displayOnHomepage.article.category});
        } catch (error) {
            this.error = error
        }
    },
    methods: {
        getStrapiMedia,
    },
    head() {
        let fullSeo = {
            metaTitle: '',
            metaDescription: '',
        }
        return {
            title: fullSeo.metaTitle,
            meta: getMetaTags(fullSeo),
        };
    }
}
</script>

app/router.scrollBehavior.js

// router.scrollBehavior.js
export default async function(to, from, savedPosition) {

  console.log("to", to);
  console.log("from", from);
  console.log("savedPosition", savedPosition);

  if (savedPosition) {
    return savedPosition
  }

  const findEl = async (hash, x) => {
    return document.querySelector(hash) ||
      new Promise((resolve, reject) => {
        if (x > 50) {
          return resolve()
        }
        setTimeout(() => { resolve(findEl(hash, ++x || 1)) }, 100)
      })
  }

  if (to.hash) {
    let el = await findEl(to.hash)
    if ('scrollBehavior' in document.documentElement.style) {
      return window.scrollTo({ top: el.offsetTop, behavior: 'smooth' })
    } else {
      return window.scrollTo(0, el.offsetTop)
    }
  }

  return { x: 0, y: 0 }

}

有人可以帮忙吗？ :(

Answer 1

这是我使用过的代码，它对我来说非常有效：

if (process.client) {
    if ('scrollRestoration' in window.history) {
        window.history.scrollRestoration = 'manual'
        // reset scrollRestoration to auto when leaving page, allowing page reload
        // and back-navigation from other pages to use the browser to restore the
        // scrolling position.
        window.addEventListener('beforeunload', () => {
            window.history.scrollRestoration = 'auto'
        })
        // Setting scrollRestoration to manual again when returning to this page.
        window.addEventListener('load', () => {
            window.history.scrollRestoration = 'manual'
        })
    }
}

export default function(to, from, savedPosition) {

    let position;
    //Your Code Starts Here
    position = savedPosition || { x: 0, y: 0 };

    const nuxt = window.$nuxt;

    // triggerScroll is only fired when a new component is loaded
    if (to.path === from.path && to.hash !== from.hash) {
        nuxt.$nextTick(() => nuxt.$emit('triggerScroll'))
    }

    return new Promise((resolve) => {
        // wait for the out transition to complete (if necessary)
        nuxt.$once('triggerScroll', () => {
            // coords will be used if no selector is provided,
            // or if the selector didn't match any element.
            if (to.hash) {
                let hash = to.hash
                // CSS.escape() is not supported with IE and Edge.
                if (typeof window.CSS !== 'undefined' && typeof window.CSS.escape !== 'undefined') {
                    hash = '#' + window.CSS.escape(hash.substr(1))
                }
                try {
                    if (document.querySelector(hash)) {
                    // scroll to anchor by returning the selector
                    position = { selector: hash }
                    }
                } catch (e) {
                    console.warn('Failed to save scroll position. Please add CSS.escape() polyfill (https://github.com/mathiasbynens/CSS.escape).')
                }
            }
            resolve(position);
        })
    });
}