So verwenden Sie den Vue-Router zum Wechseln der Seiten in Vue

In diesem Artikel wird hauptsächlich die Implementierungsmethode des automatischen Scrollens nach oben vorgestellt, wenn Vue-Router zum Wechseln der Seiten im Vue-Projekt verwendet wird. In diesem Artikel wird die Verwendung kurz vorgestellt von scrollTop. Freunde in Not können sich auf

beziehen. Manchmal benötigen wir die Bildlaufleiste der Seite, um zu einer festen Position zu scrollen, im Allgemeinen mithilfe der Window scrollTo() -Methode.

Die Syntax lautet: scrollTo(xpos,ypos)

xpos: erforderlich. Die X-Koordinate des Dokuments, das in der oberen linken Ecke des Dokumentanzeigebereichs des Fensters angezeigt werden soll.

ypos: erforderlich. Die Y-Koordinate des Dokuments, das in der oberen linken Ecke des Dokumentanzeigebereichs des Fensters angezeigt werden soll.

Zum Beispiel ist die Koordinatenposition des Bildlaufinhalts 100.500:

window.scrollTo(100,500);

Okay, dieser scrollTop wird hier nur kurz vorgestellt -Router-Verhalten.

Wenn Sie Front-End-Routing verwenden und zu einer neuen Route wechseln, möchten Sie, dass die Seite nach oben scrollt oder die ursprüngliche Scrollposition beibehält, genau wie beim Neuladen der Seite. vue-router kann das, aber besser: Sie können damit anpassen, wie die Seite beim Routenwechsel scrollt.

Hinweis: Diese Funktion ist nur im HTML5-Verlaufsmodus verfügbar.

Beim Erstellen einer Router-Instanz können Sie eine scrollBehavior-Methode bereitstellen:

const router = new VueRouter({
 routes: [...],
 scrollBehavior (to, from, savedPosition) {
  // return 期望滚动到哪个的位置
 }
})

Die scrollBehavior-Methode empfängt von und zu Routenobjekten. Der dritte Parameter „savedPosition“ ist nur bei der Popstate-Navigation verfügbar (ausgelöst durch die Vorwärts-/Zurück-Schaltflächen des Browsers).

Diese Methode gibt die Objektinformationen der Bildlaufposition zurück, die wie folgt aussehen:

{ x: number, y: number }
{ selector: string, offset? : { x: number, y: number }} (offset 只在 2.6.0+ 支持)

Wenn sie einen falschen Wert (Anmerkung des Übersetzers: falsch ist nicht falsch, siehe hier) zurückgibt, oder ein leeres Objekt. Dann erfolgt kein Scrollen.

Beispiel:

scrollBehavior (to, from, savedPosition) {
 return { x: 0, y: 0 }
}

Für alle Routennavigation lassen Sie die Seite einfach nach oben scrollen.

Zur gespeicherten Position zurückkehren. Wenn Sie die Zurück-/Vorwärts-Taste drücken, verhält es sich wie das native Verhalten des Browsers:

scrollBehavior (to, from, savedPosition) {
 if (savedPosition) {
  return savedPosition
 } else {
  return { x: 0, y: 0 }
 }
}

Wenn Sie das Verhalten von „Zum Anker scrollen“ simulieren möchten:

scrollBehavior (to, from, savedPosition) {
 if (to.hash) {
  return {
   selector: to.hash
  }
 }
}

Wir können Routing-Metainformationen auch verwenden, um das Scrollen auf einer feineren Ebene zu steuern.

 routes: [
  { path: '/', component: Home, meta: { scrollToTop: true }},
  { path: '/foo', component: Foo },
  { path: '/bar', component: Bar, meta: { scrollToTop: true }}
 ]

Vollständiges Beispiel:

import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
const Home = { template: '
home
' }
const Foo = { template: '
foo
' }
const Bar = {
 template: `
  

   bar
   

   
Anchor
  

 `
}
// scrollBehavior:
// - only available in html5 history mode
// - defaults to no scroll behavior
// - return false to prevent scroll
const scrollBehavior = (to, from, savedPosition) => {
 if (savedPosition) {
  // savedPosition is only available for popstate navigations.
  return savedPosition
 } else {
  const position = {}
  // new navigation.
  // scroll to anchor by returning the selector
  if (to.hash) {
   position.selector = to.hash
  }
  // check if any matched route config has meta that requires scrolling to top
  if (to.matched.some(m => m.meta.scrollToTop)) {
   // cords will be used if no selector is provided,
   // or if the selector didn't match any element.
   position.x = 0
   position.y = 0
  }
  // if the returned position is falsy or an empty object,
  // will retain current scroll position.
  return position
 }
}
const router = new VueRouter({
 mode: 'history',
 base: __dirname,
 scrollBehavior,
 routes: [
  { path: '/', component: Home, meta: { scrollToTop: true }},
  { path: '/foo', component: Foo },
  { path: '/bar', component: Bar, meta: { scrollToTop: true }}
 ]
})

new Vue({
 router,
 template: `
  

   
Scroll Behavior
   

    
/
    
/foo
    
/bar
    
/bar#anchor
   
   
  

 `
}).$mount('#app')

Ich habe es im Internet überprüft und Internetnutzer sagten, dass Sie auch versuchen können, dies in die main.js-Eintragsdatei mit vue-router zu schreiben

router.afterEach((to,from,next) => {
  window.scrollTo(0,0);
});

Ich habe es für alle zusammengestellt und hoffe, dass es in Zukunft für alle hilfreich sein wird.

Verwandte Artikel:

Detaillierte Einführung in Routing und Middleware in node.js

So implementieren Sie grundlegende Einkäufe mithilfe der Angular Car-Funktion

Detaillierte Einführung in kontrollierte Komponenten und unkontrollierte Komponenten in React

Das obige ist der detaillierte Inhalt vonSo verwenden Sie den Vue-Router zum Wechseln der Seiten in Vue. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!