代码之家 › 专栏 › 技术社区 › Onyx

每当我导航到另一个Vue.js路径时,都会被发送到我导航到的视图的底部,我不知道为什么

vue.js javascript

Onyx · 技术社区 · 5 年前

我只是不明白为什么会发生这种情况,因为代码中没有任何东西可以推动滚动。每当我点击链接,我就被发送到视图的底部。老实说,我不知道该发布什么代码,因为我不知道问题可能来自哪里。使用路由器链接执行导航:

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

这是整个联盟的路线图:

<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>

1 回复 | 直到 5 年前

Naskalin 5 年前

卷轴确实存在这样一个问题,它是通过路由器中的钩子来解决的,因此卷轴总是在每页的顶部。

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

    next();
});

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

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