vue.js - 如何在不同页面之间使用 Vue js 在导航链接上添加平滑滚动？

Question

我有一个 HomeNavbar.vue 组件，其中包含我的导航栏链接（我正在使用 Vue-Router）。

主页导航栏.vue：

<template>
    <div>
        <b-container fluid>
            <b-row>
                <b-col>
                    <nav class="navbar navbar-expand-lg">
                        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation">
                            <span class="navbar-toggler-icon"></span>
                        </button>
                        <div class="collapse navbar-collapse" id="navbarTogglerDemo01">
                            <a class="navbar-brand logo" href="/"></a>
                            <ul class="navbar-nav ml-auto mt-2 mt-lg-0">

                                <li class="nav-item">
                                    <router-link to="/" class="nav-link">Home</router-link>
                                </li>
                                <li class="nav-item">
                                    <router-link to="/about" class="nav-link">About</router-link>
                                </li>
                                <li class="nav-item">
                                    <ScrollToLink
                                        href="#features"
                                        class="nav-link"
                                    >Features
                                    </ScrollToLink>
                                </li>
<!--                                <li class="nav-item">-->
<!--                                    <router-link to="/pricing" class="nav-link">Pricing</router-link>-->
<!--                                </li>-->
                                <li class="nav-item">
                                    <router-link to="/faqs" class="nav-link">FAQ's</router-link>
                                </li>
                                <li class="nav-item">
                                    <router-link to="/contact" class="nav-link">Contact</router-link>
                                </li>
                            </ul>
                        </div>
                        <!--            <a class="nav-link" id="searchBox"><i class="fa fa-search"></i></a>-->
                    </nav>
                </b-col>
            </b-row>
        </b-container>
    </div>
</template>

<script>
    import ScrollToLink from '../components/ScrollToLink';

    export default {
        name: "HomeNavbar",
        components: {
            ScrollToLink
        }
    }
</script>

如您所见，我创建了一个简单的组件，用于平滑滚动，称为 ScrollToLink.vue，在上面的代码中使用。

ScrollToLink.vue：

<template>
    <a :href="href" @click.prevent="scroll">
        <slot></slot>
    </a>
</template>

<script>
    export default {
        name: "ScrollToLink",
        props: ['href'],
        methods: {
            scroll() {
                document.querySelector(this.href)
                    .scrollIntoView({ behavior: 'smooth' });
            }
        }
    }
</script>

<style scoped>

</style>

当我在主页上时，该代码运行良好，其中包含功能部分以及id="#features"它将向下滚动到的位置。但是，如果我单击About页面，然后单击 Features 按钮，它指向http://highrjobsadminlte.test/about#features，而不是 this http://highrjobsadminlte.test/#features。

我怎样才能让它/#features通过主页链接回？

标签： vue.js