長い vue ページを移動する方法

Vue は、開発者が応答性の高い Web アプリケーションをより簡単に構築できるようにするフロントエンド フレームワークです。実際の開発では、表、リスト、グラフなど、多くのコンテンツを含む比較的長いページに遭遇することがよくあります。適切なナビゲーション方法がないと、ユーザーは使用中に混乱し、不便に感じる可能性があります。この記事では、ユーザー エクスペリエンスを向上させるための一般的な Vue ナビゲーション方法をいくつか紹介します。

1. アンカー ナビゲーション

アンカー ナビゲーションは、アンカー スクロール効果とも呼ばれ、リンク アンカーを使用して内部ページ間を移動します。ユーザーがページ上のリンクをクリックすると、ページは対応する位置まで自動的にスクロールし、ナビゲーション効果が得られます。

Vue でアンカー ナビゲーションを実装するには 2 つの方法があります。1 つは Vue Router を使用してルーティングを構成する方法、もう 1 つは Vue 命令を使用してテンプレート内の命令を直接呼び出す方法です。ここでは Vue 命令を例にして紹介します。

(1) アンカー ポイントを定義します。

以下に示すように、ページ上のジャンプする必要がある位置にアンカー ポイントを追加します。

<div id="article1"></div>

(2) 定義ナビゲーション リンク

次に示すように、ナビゲーションを実装する必要があるリンクを追加します。

<router-link to="#article1">文章1</router-link>

(3) スクロール命令を定義します

カスタム命令 v-scroll- を定義します。 Vue インスタンスで、scrollTop 関数を使用して、以下に示すようにページのスクロール効果を実現します。

Vue.directive('scroll-to', {
  bind: function (el, binding) {
    el.addEventListener('click', function () {
      document.documentElement.scrollTop = document.getElementById(binding.value).offsetTop
    })
  }
})

(4) 命令を呼び出します

v-scroll-to 命令を使用します以下に示すように、テンプレート内でナビゲーション効果を呼び出します:

<a href="#" v-scroll-to="&#39;article1&#39;">文章1</a>

2. サイドバー ナビゲーション

サイドバー ナビゲーションは、Web サイト ナビゲーションの一般的な方法です。ページのサイドバー、およびナビゲーション項目をリスト形式で表示します。

Vue でサイドバー ナビゲーションを実装するには 2 つの方法があります。1 つはナビゲーション バー コンポーネントを手動で記述する方法で、もう 1 つは Vue UI フレームワーク (Element UI、Bootstrap Vue など) によって提供されるナビゲーション バー コンポーネントを使用する方法です。 、など）。ここではElement UIを例に紹介します。

(1) Element UI のインストール

Vue プロジェクトで Element UI を使用する前に、まず Element UI をインストールする必要があります。次のコマンドでインストールできます:

npm install element-ui -S

(2) Element UI コンポーネントを導入します

次に示すように、Element-ui コンポーネントを Vue インスタンスに導入します。

import Vue from 'vue'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

Vue.use(ElementUI);

(3) サイドバー コンポーネントを追加します

el-aside コンポーネントを使用します。 以下に示すように、サイドバー コンテナーとして、el-menu コンポーネントをサイドバー ナビゲーション項目として使用します。

<el-aside>
  <el-menu
    default-active="2"
    class="el-menu-vertical-demo"
    :router="true"
    :collapse="collapse"
    background-color="#EDF0F5"
    text-color="#000"
    active-text-color="#409EFF">
    <el-submenu index="1">
      <template slot="title">
        <i class="el-icon-location"></i>
        <span slot="title">导航一</span>
      </template>
      <el-menu-item-group>
        <template slot="title">分组一</template>
        <el-menu-item index="/index1-1">选项1</el-menu-item>
        <el-menu-item index="/index1-2">选项2</el-menu-item>
      </el-menu-item-group>
      <el-menu-item-group title="分组二">
        <el-menu-item index="3">选项3</el-menu-item>
      </el-menu-item-group>
      <el-submenu index="4">
        <template slot="title">选项4</template>
        <el-menu-item index="/index1-3">选项4-1</el-menu-item>
      </el-submenu>
    </el-submenu>
    <el-submenu index="2">
      <template slot="title">
        <i class="el-icon-menu"></i>
        <span slot="title">导航二</span>
      </template>
      <el-menu-item index="/index2-1">选项1</el-menu-item>
      <el-menu-item index="/index2-2">选项2</el-menu-item>
      <el-menu-item index="/index2-3">选项3</el-menu-item>
    </el-submenu>
    <el-submenu index="3">
      <template slot="title">
        <i class="el-icon-document"></i>
        <span slot="title">导航三</span>
      </template>
      <el-menu-item index="/index3-1">选项1</el-menu-item>
      <el-menu-item index="/index3-2">选项2</el-menu-item>
      <el-menu-item index="/index3-3">选项3</el-menu-item>
    </el-submenu>
  </el-menu>
</el-aside>

(4) ルーティングの構成

コンポーネントの追加に加えて、ルーティングを構成します。以下に示すように、ルーティングを構成する必要もあります:

const routes = [
  { path: '/index1-1', component: Index1 },
  { path: '/index1-2', component: Index1 },
  { path: '/index1-3', component: Index1 },
  { path: '/index2-1', component: Index2 },
  { path: '/index2-2', component: Index2 },
  { path: '/index2-3', component: Index2 },
  { path: '/index3-1', component: Index3 },
  { path: '/index3-2', component: Index3 },
  { path: '/index3-3', component: Index3 },
]
const router = new VueRouter({
  routes
})

3. トップに戻るナビゲーション

トップに戻るナビゲーションは、比較的単純なナビゲーション方法です。ページ下部の先頭に戻る: ユーザーがページをスクロールするときにいつでもクリックしてページの先頭に戻ることができるボタン。

Vue でトップに戻るナビゲーションを実装するには 2 つの方法があります。1 つは手動でコンポーネントの実装を記述する方法で、もう 1 つは Vue プラグインを使用して実装する方法です。ここではVueプラグインの使い方を紹介します。

(1) Vue プラグインのインストール

Vue プロジェクトで back-to-top プラグインを使用する前に、まずプラグインをインストールする必要があります。次のコマンドを使用してこれを実行します。

npm install vue-backtotop --save

(2 )Vue プラグインの紹介

次に示すように、main.js に Vue プラグインを導入します。

import VueBackToTop from 'vue-backtotop'

Vue.use(VueBackToTop)

(3) 「先頭に戻る」コンポーネントを追加します。

必要に応じて「先頭に戻る」コンポーネントを追加します。「先頭に戻る」コンポーネントは、以下に示すように、機能ページで使用されます。 3 つのメソッドを使用すると、Vue プロジェクトにさまざまなページ ナビゲーション メソッドを実装して、ユーザーにより良いエクスペリエンスを提供できます。実際の開発では、最適なユーザー インタラクション効果を実現するために、特定の状況に応じて使用する特定のナビゲーション方法を判断する必要があります。

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