vue-routerを使用してvueでページを切り替える方法

この記事ではvueプロジェクトでvue-routerを使用してページを切り替える際に自動的に上部にスクロールするスクロールバーの実装方法を中心に紹介します。一般的にはWindowのscrollTo()メソッドを使用して実装されます。必要なもの 友達が参照できるようにします

場合によっては、ページ スクロール バーを固定位置にスクロールする必要があります。通常は WindowscrollTo() メソッドを使用します。 Window scrollTo() 方法。

语法就是：scrollTo(xpos,ypos)

xpos：必需。要在窗口文档显示区左上角显示的文档的 x 坐标。

ypos：必需。要在窗口文档显示区左上角显示的文档的 y 坐标。

例如滚动内容的坐标位置100,500：

window.scrollTo(100,500);

構文は次のとおりです: scrollTo(xpos,ypos)

xpos: 必須。ウィンドウのドキュメント表示領域の左上隅に表示されるドキュメントの x 座標。

誤字: 必須。ウィンドウのドキュメント表示領域の左上隅に表示されるドキュメントの y 座標。

たとえば、スクロールするコンテンツの座標位置は 100,500 です: window.scrollTo(100,500);

さて、ここでこのscrollTopを簡単に紹介しましょう。ルーター。

フロントエンドルーティングを使用して、新しいルートに切り替えるときに、ページをリロードするのと同じように、ページを一番上までスクロールするか、元のスクロール位置を維持する必要があります。 vue-router はそれを実行できますが、さらに良いことに、ルートを切り替えるときにページがスクロールする方法をカスタマイズできます。

注: この機能は、HTML5 履歴モードでのみ使用できます。

Router インスタンスを作成するとき、scrollBehavior メソッドを提供できます:

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

scrollBehavior メソッドはルート オブジェクトとの間で受信を行います。 3 番目のパラメータ SavedPosition は、ポップステート ナビゲーション (ブラウザの進む/戻るボタンによってトリガーされる) の場合にのみ使用できます。

このメソッドは、次のようなスクロール位置のオブジェクト情報を返します:

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

false (翻訳者注: false は false ではありません。ここを参照してください) 値、または空のオブジェクトを返した場合、スクロールは行われません。起こる。

例:

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

すべてのルート ナビゲーションでは、ページを上部までスクロールするだけです。

savedPosition に戻ります。戻る/進むボタンが押されると、ブラウザのネイティブ動作のように動作します:

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

「アンカーまでスクロール」の動作をシミュレートしたい場合:

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

ルーティング メタを使用することもできます。情報 スクロールのよりきめ細かい制御。

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

完全な例:

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

インターネットで調べたところ、ネチズンは、vue-routerを使用してmain.jsエントリファイルにこれを書いてみることもできると言っています

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

上記は、私が皆さんのためにまとめたものです、今後、皆様のお役に立つことを願っております。

関連記事:

node.jsのルーティングとミドルウェアの詳細な紹介

🎜🎜🎜Angularを使用して基本的なショッピングカート機能を実装する方法🎜🎜🎜🎜React Componentsの制御コンポーネントと非制御コンポーネントの詳細な紹介🎜🎜

以上がvue-routerを使用してvueでページを切り替える方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。