[Vue-Router] Scrollverhalten

In Vue Router können Sie Scroll Behavior verwenden, um das Verhalten des Seitenscrollens beim Routing von Schaltern zu definieren. Wenn Sie die Route wechseln, scrollt die Seite standardmäßig zum Anfang der neuen Seite. Sie können jedoch flexiblere Scrolleffekte erzielen, indem Sie das Scrollverhalten anpassen, z. B. zu einer bestimmten Elementposition scrollen oder die Scrollposition unverändert lassen.

Um das Scrollverhalten anzupassen, müssen Sie scrollBehaviorbeim Erstellen der Vue Router-Instanz eine Funktion übergeben. Diese Funktion wird aufgerufen, wenn die Route gewechselt wird, und empfängt drei Parameter: todas Routenobjekt, fromdas Routenobjekt und savedPositiondas Bildlaufpositionsobjekt (falls vorhanden).

Hier ist ein einfaches Beispiel, das zeigt, wie Sie das Scrollverhalten anpassen können:

export const router = createRouter({
    
    
  history: createWebHistory(),
  routes: [...],
  scrollBehavior(to, from, savedPosition) {
    
    
    // 如果有保存的滚动位置，则恢复到保存的位置
    if (savedPosition) {
    
    
      return savedPosition;
    }
    // 否则，滚动到新页面的顶部
    else {
    
    
      // 返回水平和垂直方向的滚动位置
      return {
    
     x: 0, y: 0 };
      // 或者 return { top: 0, left: 0 );
    }
  }
});

Im obigen Beispiel haben wir eine scrollBehavioraufgerufene Funktion definiert und je nach Situation unterschiedliche Bildlaufpositionen zurückgegeben. Wenn eine gespeicherte Bildlaufposition vorhanden ist (z. B. wenn der Benutzer auf die Zurück-Schaltfläche des Browsers klickt), wird diese an der vorherigen Position wiederhergestellt. Wenn keine gespeicherte Position vorhanden ist, setzen Sie die Bildlaufposition auf den oberen Rand der neuen Seite zurück.

Wenn Sie scrollBehavioreinen asynchronen Vorgang in einer Vue-Router-Funktion ausführen möchten und warten möchten, bis der asynchrone Vorgang abgeschlossen ist, bevor Sie die Bildlaufposition festlegen, können Sie einen in dieser Funktion zurückgeben Promise. Sobald PromiseSie fertig sind, können Sie resolvedie Bildlaufposition festlegen.

Hier ist ein Beispiel, das zeigt, wie asynchrone Vorgänge in scrollBehavior verwendet werden:

export const router = createRouter({
    
    
  routes: [...],
  scrollBehavior(to, from, savedPosition) {
    
    
    return new Promise((resolve) => {
    
    
      // 模拟异步操作
      setTimeout(() => {
    
    
        // 如果有保存的滚动位置，则恢复到保存的位置
        if (savedPosition) {
    
    
          resolve(savedPosition);
        }
        // 否则，滚动到新页面的顶部
        else {
    
    
          resolve({
    
     x: 0, y: 0 });
        }
      }, 1000); // 假设异步操作需要 1 秒完成
    });
  }
});