Vuejs gehen nach Umleitung

Question

in meinem <div id="app">.....</div> ich etwas zu verankern, wie die folgenden

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

Wenn ich auf jedem dieser Zeile klicken, wird sie mich auf die gleiche Seite bringen. Aber nach dem Laden der Seite möchte ich, dass sie zu 5 verschiedenen spezifischen Ankern springen.

Ist es möglich, es mit Vuejs zu tun (ich benutze Laravel)? Wird Vue-Router den Job machen? Vielen Dank.

Answer 1

Wenn Sie an einer bestimmten Stelle in der gleichen Seite springen möchten, können Sie Vue Router verwenden und eine Methode erstellen, um es zu bewegen mag:

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 
    ] 
}); 

Extrahiert aus here.

oder ein Verfahren in der gleichen Seite erstellen:

//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); 
    } 
} 

Sie einen Blick auf die offizielle Dokumentation von Scroll Behaviour nehmen und hier eine jsfiddle mit einem Beispiel: JsFiddle

Hoffe, es hilft!