How to navigate a long vue page

Vue is a front-end framework that allows developers to build responsive web applications more easily. In actual development, we often encounter some relatively long pages that contain a lot of content, such as tables, lists, charts, etc. Without a proper navigation method, users may feel confused and inconvenient during use. This article will introduce some common Vue navigation methods to improve user experience.

1. Anchor Navigation

Anchor navigation, also known as the anchor scrolling effect, uses link anchors to jump between internal pages. When the user clicks a link on the page, the page will automatically scroll to the corresponding position, thus achieving the navigation effect.

There are two ways to implement anchor navigation in Vue. One is to use Vue Router to configure routing; the other is to use Vue instructions to directly call instructions in the template. Here we take the Vue instruction as an example to introduce.

(1) Define the anchor point

Add the anchor point at the position where you need to jump on the page, as shown below:

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

(2) Define the navigation link

Add a link where navigation needs to be implemented, as shown below:

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

(3) Define scrolling instructions

Define the custom instruction v-scroll-to in the Vue instance, Use the scrollTop function to achieve the scrolling effect of the page, as shown below:

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

(4) Call the instruction

Use the v-scroll-to instruction in the template to call the navigation effect, as shown below:

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

2. Sidebar navigation

Sidebar navigation is a common way of website navigation. It places the navigation bar on the sidebar of the page, and Display navigation items in the form of a list.

There are two ways to implement sidebar navigation in Vue. One is to manually write the navigation bar component; the other is to use the navigation bar component provided by the Vue UI framework (such as Element UI, Bootstrap Vue, etc.) . Here we take Element UI as an example to introduce.

(1) Install Element UI

Before using Element UI in a Vue project, you need to install Element UI first. You can install it through the following command:

npm install element-ui -S

(2) Introduce the Element UI component

Introduce the element-ui component into the Vue instance, as shown below:

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

Vue.use(ElementUI);

(3) Add the sidebar component

Use the el-aside component As a sidebar container, use the el-menu component as a sidebar navigation item, as shown below:

<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) Configure routing

In addition to adding components, you also need to configure routing, As shown below:

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 navigation is a relatively simple navigation method. Add a fixed position return to top at the bottom of the page. Button that users can click at any time to return to the top of the page as they scroll through the page.

There are two ways to implement back to top navigation in Vue, one is to manually write component implementation, and the other is to use a Vue plug-in to implement it. Here we introduce how to use the Vue plug-in.

(1) Install the Vue plug-in

Before using the back-to-top plug-in in the Vue project, you need to install the plug-in first. You can install it through the following command:

npm install vue-backtotop --save

(2 )Introducing the Vue plug-in

Introduce the Vue plug-in in main.js, as shown below:

import VueBackToTop from 'vue-backtotop'

Vue.use(VueBackToTop)

(3) Add the back to top component

Add back to the top when needed The back-to-top component is used in the functional page, as shown below:

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

Through the above three methods, we can implement different page navigation methods in the Vue project to provide users with a better experience. . In actual development, the specific navigation method to be used needs to be judged according to the specific situation to achieve the best user interaction effect.

The above is the detailed content of How to navigate a long vue page. For more information, please follow other related articles on the PHP Chinese website!