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 では、

Section 1

Section 2
Section 3

Section 1
Section 2
Section 3