vue頁面比較長如何導航

這篇文章主要介紹“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）調用指令

在模板中使用v-scroll-to指令來調用導航效果，如下所示：

<a href="#" v-scroll-to="'article1'">文章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組件

在Vue實例中引入element-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. 回到頂部導航

回到頂部導航是一種比較簡單的導航方式，在頁面底部添加一個固定位置的返回頂部按鈕，當用戶在頁面中滾動時，可以隨時點擊按鈕返回頁面頂部。

在Vue中實現回到頂部導航可以使用兩種方式，一種是手動編寫組件實現，另一種是使用Vue插件來實現。這里我們以使用Vue插件的方式進行介紹。

（1）安裝Vue插件

在Vue項目中使用回到頂部插件前，需要先安裝插件，可以通過如下命令進行安裝：

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>

到此，關于“vue頁面比較長如何導航”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續學習更多相關知識，請繼續關注億速云網站，小編會繼續努力為大家帶來更多實用的文章！