Vue は、開発者が応答性の高い Web アプリケーションをより簡単に構築できるようにするフロントエンド フレームワークです。実際の開発では、表、リスト、グラフなど、多くのコンテンツを含む比較的長いページに遭遇することがよくあります。適切なナビゲーション方法がないと、ユーザーは使用中に混乱し、不便に感じる可能性があります。この記事では、ユーザー エクスペリエンスを向上させるための一般的な Vue ナビゲーション方法をいくつか紹介します。
アンカー ナビゲーションは、アンカー スクロール効果とも呼ばれ、リンク アンカーを使用して内部ページ間を移動します。ユーザーがページ上のリンクをクリックすると、ページは対応する位置まで自動的にスクロールし、ナビゲーション効果が得られます。
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="'article1'">文章1</a>
サイドバー ナビゲーションは、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
})トップに戻るナビゲーションは、比較的単純なナビゲーション方法です。ページ下部の先頭に戻る: ユーザーがページをスクロールするときにいつでもクリックしてページの先頭に戻ることができるボタン。
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 サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
