vueはアンカースクロールを実装します

はじめに

ページ アンカー スクロールを実装する方法はたくさんありますが、Vue ではどのように実装されるのでしょうか? Vue では、Vue Router を使用してアンカー スクロールを実装できます。以下では、コードのデモを通して、Vue でアンカー スクロールを実装する方法を示します。

ステップ 1: Vue Router をインストールする

Vue Router を使用する前に、まず Vue Router をインストールする必要があります。次のコマンドを使用して Vue Router をインストールできます:

npm install vue-router

または

yarn add vue-router

ステップ 2: Vue Router を構成する

Vue Router をインストールした後、次のコマンドで Vue Router を構成する必要があります。コード。 Vue では、次のように main.js ファイルに Vue Router を導入して使用する必要があります:

import Vue from 'vue'
import VueRouter from 'vue-router'
import App from './App.vue'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'home',
    component: Home
  },
  {
    path: '/about',
    name: 'about',
    component: About
  },
  {
    path: '/contact',
    name: 'contact',
    component: Contact
  }
]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

new Vue({
  router,
  render: h => h(App),
}).$mount('#app')

上記のコードでは、3 つのルート、つまり '/' と '/about' ,'/ を定義します。接触'。このうち、各ルートは、Home、About、Contact のコンポーネントに対応します。

ステップ 3: ページ アンカー ポイントを定義する

Vue でページ アンカー ポイントを定義するには、以下に示すように、HTML 要素に id 属性を追加する必要があります。 4: アンカー ジャンプ リンクを定義する

Vue では、

<router-link>

コンポーネントを通じてリンクを生成できます。ページ アンカー ジャンプを実現するには、次のように <router-link> コンポーネントを定義する必要があります。 <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>&lt;div id=&quot;section1&quot;&gt;Section 1&lt;/div&gt; &lt;div id=&quot;section2&quot;&gt;Section 2&lt;/div&gt; &lt;div id=&quot;section3&quot;&gt;Section 3&lt;/div&gt;</pre><div class="contentsignin">ログイン後にコピー</div></div> 上記のコードでは、 to 属性を使用してリンク アドレスを定義します。 、その値はアンカー ID です。

ステップ 5: アンカー スクロールの実装

Vue では、フック関数を通じてアンカー スクロールを実装できます。各ルート ジャンプが完了したら、アンカー ポイントまでスクロールする必要があります。フック関数は Vue のルーティングで定義でき、具体的なコードは次のとおりです:

<router-link to="#section1">Section 1</router-link>
<router-link to="#section2">Section 2</router-link>
<router-link to="#section3">Section 3</router-link>

上記のコードでは、scrollBehavior によってスクロール操作を定義しています。配線オブジェクトにハッシュ属性がある場合、つまり指定したアンカーポイントに配線がジャンプする場合にはスクロール動作が行われ、そうでない場合にはスクロール動作は行われません。

結論

この時点で、Vue でページ アンカー スクロールを実装するコードが完成しました。 Vue Router の強力な機能により、アンカー スクロールを簡単に実装してユーザー エクスペリエンスを向上させることができます。他に実装方法がある場合は、ぜひ皆さんと共有してください。

以上がvueはアンカースクロールを実装しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。