Vuejs重定向后去锚点

Question

在我的<div id="app">.....</div> 中，我有类似以下内容

        <div class="fp-row4-content">
            ... ROW 1 ...
        </div>
            <div class="partition-line"></div>
        <div class="fp-row4-content">
            ... ROW 2 ...
        </div>
            <div class="partition-line"></div>
        <div class="fp-row4-content">
            ... ROW 3...
        </div>
            <div class="partition-line"></div>
        <div class="fp-row4-content">
            ... ROW 4 ...
        </div>
            <div class="partition-line"></div>
        <div class="fp-row4-content">
            ... ROW 5 ...
        </div>

如果我点击每一行，它们会将我带到同一页面。但页面加载后，我希望它们跳转到 5 个不同的特定锚点。

是否可以使用 Vuejs（我正在使用 Laravel）来做到这一点？ vue-router 会完成这项工作吗？谢谢。

Answer 1

如果你想跳转到同一页面中的特定位置，你可以使用 Vue Router 并创建一个方法来滚动到它，例如：

new VueRouter({
    mode: 'history',
    scrollBehavior: function(to, from, savedPosition) {
        if (to.hash) {
            return {selector: to.hash}
        } else {
            return { x: 0, y: 0 }
        }
    },
    routes: [
        {path: '/', component: abcView},
        // your routes
    ]
});

从here 中提取。

或者在同一个页面中创建一个方法：

//Your view:
<a class="link-button" @click="scrollMeTo('section')">Jump</a>
...
<div ref="section" class="section1">

//JS
methods: {
  scrollMeTo(refName) {
    var element = this.$refs[refName];
    var top = element.offsetTop;

    window.scrollTo(0, top);
  }
}

您可以查看Scroll Behaviour 的官方文档，这里有一个带有示例的 jsfiddle：JsFiddle

希望对你有帮助！