Long Vue 페이지를 탐색하는 방법

Vue는 개발자가 반응형 웹 애플리케이션을 보다 쉽게 ​​구축할 수 있는 프런트 엔드 프레임워크입니다. 실제 개발 과정에서 우리는 표, 목록, 차트 등과 같이 많은 콘텐츠가 포함된 상대적으로 긴 페이지를 자주 접하게 됩니다. 적절한 탐색 방법이 없으면 사용자는 사용 중에 혼란스럽고 불편함을 느낄 수 있습니다. 이 기사에서는 사용자 경험을 개선하기 위한 몇 가지 일반적인 Vue 탐색 방법을 소개합니다.

1. 앵커 탐색

앵커 스크롤 효과라고도 알려진 앵커 탐색은 링크 앵커를 사용하여 내부 페이지 사이를 이동합니다. 사용자가 페이지의 링크를 클릭하면 페이지가 자동으로 해당 위치로 스크롤되어 탐색 효과를 얻습니다.

Vue에서 앵커 탐색을 구현하는 방법에는 두 가지가 있습니다. 하나는 Vue Router를 사용하고 라우팅을 구성하여 구현하는 것이고, 다른 하나는 Vue 지침을 사용하고 템플릿에서 직접 지침을 호출하는 것입니다. 여기서는 Vue 명령어를 예로 들어 소개하겠습니다.

(1) 앵커 포인트 정의

다음과 같이 페이지에서 점프해야 하는 위치에 앵커 포인트를 추가합니다.

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

(2) 탐색 링크 정의

페이지에서 점프해야 하는 위치에 링크를 추가합니다. 아래와 같이 탐색 기능을 구현해야 합니다.

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

(3) 스크롤 명령 정의

Vue 인스턴스에서 사용자 정의 명령 v-scroll-to를 정의하고, scrollTop 함수를 사용하여 페이지의 스크롤 효과를 얻으세요. 아래와 같이:

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

(4) 명령 호출

in 템플릿에서 v-scroll-to 지시문을 사용하여 아래와 같이 탐색 효과를 호출합니다.

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

2. 사이드바 탐색

사이드바 탐색은 페이지 사이드바에 탐색 모음을 배치하고 탐색 항목을 목록 형식으로 표시하는 일반적인 웹 사이트 탐색 방법입니다.

Vue에서 사이드바 탐색을 구현하는 방법에는 두 가지가 있습니다. 하나는 탐색 모음 구성 요소를 수동으로 작성하는 것이고, 다른 하나는 Vue UI 프레임워크(예: Element UI, Bootstrap Vue 등)에서 제공하는 탐색 모음 구성 요소를 사용하는 것입니다. . 여기서는 Element UI를 예로 들어 소개하겠습니다.

(1) Element UI 설치

Vue 프로젝트에서 Element UI를 사용하기 전에 먼저 다음 명령을 통해 Element UI를 설치해야 합니다.

npm install element-ui -S

(2) Element UI 구성 요소 소개

Introduce 요소. 아래와 같이 Vue 인스턴스 -ui 구성 요소에서:

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. Back to top Navigation

Back to top 탐색은 비교적 간단한 탐색 방법으로, 맨 아래에 추가합니다. 페이지 사용자가 페이지를 스크롤할 때 언제든지 클릭하면 페이지 상단으로 돌아갈 수 있는 고정 위치 맨 위로 돌아가기 버튼입니다.

Vue에서 맨 위로 이동을 구현하는 방법에는 두 가지가 있습니다. 하나는 구성 요소 구현을 수동으로 작성하는 것이고, 다른 하나는 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) back-to-top 컴포넌트 추가

페이지에서 back-to-top 컴포넌트 사용 아래와 같이 back-to-top 기능을 추가해야 하는 경우:

<back-to-top></back-to-top>

위의 세 가지 방법을 통해 Vue 프로젝트에서 다양한 페이지 탐색 방법을 구현하여 사용자에게 더 나은 경험을 제공할 수 있습니다. 실제 개발에서는 최상의 사용자 상호 작용 효과를 얻으려면 사용할 특정 탐색 방법을 특정 상황에 따라 판단해야 합니다.

위 내용은 Long Vue 페이지를 탐색하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!