javascript - 每当我导航到不同的 Vue.js 路线时，我都会被发送到我导航到的 View 的底部，我无法弄清楚为什么

Question

我只是想不通为什么会这样，因为代码中没有任何内容可以阻止滚动。每当我单击链接时，我都会被发送到 View 的底部。老实说，我不确定要发布什么代码，因为我不知道问题出在哪里。导航是使用路由器链接执行的:

<router-link :to="'LeagueOfStats'">More Info</router-link>

这是整个 LeagueOfStats 路线 View :

<template>
    <div>
        <main class='wrapper'>
            <div class='project-info'>
                <h1 class='project-title'>League Of Stats</h1>
                <p class='project-description'>
                    League Of Stats is a single-page application which allows
                    League of Legends users to easily look up information and
                    statistics about their accounts by utilizing Riot Games's API.
                </p>
                <p class='project-skills'>Languages, Frameworks & Libraries</p>
                <div class='skills-container'>
                        <img @mouseover='displayAlt' @mouseleave='hover = false' class='skill-image' src="@/assets/html.png" alt="HTML5">
                        <img @mouseover='displayAlt' @mouseleave='hover = false' class='skill-image' src="@/assets/css.png" alt="CSS3">
                        <img @mouseover='displayAlt' @mouseleave='hover = false' class='skill-image' src="@/assets/js.png" alt="JavaScript">
                        <img @mouseover='displayAlt' @mouseleave='hover = false' class='skill-image' src="@/assets/vue.png" alt="Vue.js">
                        <img @mouseover='displayAlt' @mouseleave='hover = false' class='skill-image' src="@/assets/php.png" alt="PHP">
                        <img @mouseover='displayAlt' @mouseleave='hover = false' class='skill-image' src="@/assets/laravel.png" alt="Laravel">
                        <img @mouseover='displayAlt' @mouseleave='hover = false' class='skill-image' src="@/assets/mysql.png" alt="MySQL">
                    </div>
                <div class="buttons flex">
                    <a class='live-site' href="http://lol.kabzamalov.com"><img src="@/assets/external.svg" alt="Visit Site">Visit Site</a>
                    <a class='github' href="https://github.com/BozhidarKabzamalov/League-Of-Legends-Frontend"><img src="@/assets/github-white.svg" alt="GitHub">Front-end Repository</a>
                    <a class='github' href="https://github.com/BozhidarKabzamalov/League-Of-Legends-Backend"><img src="@/assets/github-white.svg" alt="GitHub">Back-end Repository</a>
                </div>
                <div class='caption' v-if='hover' v-bind:style='{ "top": eOffsetTop + "px", "left": eOffsetLeft + "px" }'>
                        <p>{{ alt }}</p>
                    </div>
            </div>
            <div class="image-container">
                <img class='project-image' src="@/assets/leagueofstats/lol1.jpg" alt="Landing Page">
            </div>
            <div class="project-specifications">
                <p class='project-description'>
                    The application consists of a Vue.js front-end and PHP (Laravel) back-end
                    which are separated from each other. Separating the front-end from the
                    back-end has many advantages such as:
                </p>
                <ul>
                    <li>Readability</li>
                    <li>Flexibility</li>
                    <li>Scalability</li>
                    <li>Easy maintenance</li>
                    <li>Modularity</li>
                    <li>Easier deployment</li>
                </ul>
                <p class='bold'>Front-end responsibilities:</p>
                <ul>
                    <li>Make requests to the back-end for information about League Of Legends users and matches</li>
                    <li>Display all the information in an understandable manner</li>
                </ul>
                <p class='bold'>Back-end responsibilities:</p>
                <ul>
                    <li>Make requests to Riot Games's API and then return the responses to the front-end</li>
                    <li>Store the API responses inside the database</li>
                    <li>Obfuscate Riot Games's API key</li>
                </ul>
            </div>
            <div class="image-container">
                <img class='project-image' src="@/assets/leagueofstats/lol2.jpg" alt="Landing Page">
            </div>
        </main>
        <Footer></Footer>
    </div>
</template>

<script>
import Footer from '../components/Footer.vue';

export default {
    components: {
        Footer
    },
    data(){
        return {
            hover: false,
            eOffsetTop: null,
            eOffsetLeft: null,
            alt: null
        }
    },
    methods: {
        displayAlt(e){
            this.hover = true;

            let height = e.target.height
            let width = e.target.width
            let eOffsetTop = e.target.offsetTop
            let eOffsetLeft = e.target.offsetLeft
            let alt = e.target.alt

            this.eOffsetTop = eOffsetTop + height + 10
            this.eOffsetLeft = eOffsetLeft + width/2
            this.alt = e.target.alt
        }
    }
}
</script>

Answer 1

scroll确实存在这样的问题，通过router中的一个hook解决了，让每一个页面的scroll总是在页面的顶部。

router.beforeEach((to, from, next) => {
    if (!to.hash) {
        window.scrollTo(0, 0);
    }

    next();
});

证明:https://github.com/vuejs/vue-router/issues/173#issuecomment-149073396

--

如果这不是问题所在，请尝试注释掉您的 displayAlt 方法，这可能是一个问题。