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

希望它有所帮助！

Vuejs在重定向后去锚

1 个答案: