vue頁面比較長如何導(dǎo)航

這篇文章主要介紹“vue頁面比較長如何導(dǎo)航”，在日常操作中，相信很多人在vue頁面比較長如何導(dǎo)航問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”vue頁面比較長如何導(dǎo)航”的疑惑有所幫助！接下來，請跟著小編一起來學(xué)習(xí)吧！

1. 錨點導(dǎo)航

錨點導(dǎo)航，又稱為錨點滾動效果，通過鏈接錨點來實現(xiàn)內(nèi)部頁面之間的跳轉(zhuǎn)。當(dāng)用戶點擊頁面上的某一個鏈接時，頁面會自動滾動到對應(yīng)的位置，從而實現(xiàn)導(dǎo)航的效果。

在Vue中實現(xiàn)錨點導(dǎo)航有兩種方式，一種是使用Vue Router，通過配置路由的方式實現(xiàn)；另一種是使用Vue指令，在模板中直接調(diào)用指令的方式實現(xiàn)。這里我們以Vue指令為例進(jìn)行介紹。

（1）定義錨點

在頁面中需要跳轉(zhuǎn)的位置處添加錨點，如下所示：

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

（2）定義導(dǎo)航鏈接

在需要實現(xiàn)導(dǎo)航的位置添加鏈接，如下所示：

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

（3）定義滾動指令

在Vue實例中定義自定義指令v-scroll-to，使用scrollTop函數(shù)實現(xiàn)頁面的滾動效果，如下所示：

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

（4）調(diào)用指令

在模板中使用v-scroll-to指令來調(diào)用導(dǎo)航效果，如下所示：

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

2. 側(cè)邊欄導(dǎo)航

側(cè)邊欄導(dǎo)航是一種比較常見的網(wǎng)站導(dǎo)航方式，它將導(dǎo)航條放置在頁面的側(cè)邊欄，并以列表的形式展現(xiàn)導(dǎo)航項。

在Vue中實現(xiàn)側(cè)邊欄導(dǎo)航也有兩種方式，一種是手動編寫導(dǎo)航欄組件；另一種是使用Vue UI框架（如Element UI、Bootstrap Vue等）提供的導(dǎo)航欄組件。我們這里以Element UI為例進(jìn)行介紹。

（1）安裝Element UI

在Vue項目中使用Element UI前，需要先安裝Element UI，可以通過如下命令進(jìn)行安裝：

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）添加側(cè)邊欄組件

使用el-aside組件作為側(cè)邊欄容器，使用el-menu組件作為側(cè)邊欄導(dǎo)航項，如下所示：

<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">導(dǎo)航一</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">導(dǎo)航二</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">導(dǎo)航三</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. 回到頂部導(dǎo)航

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

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

（1）安裝Vue插件

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

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>

到此，關(guān)于“vue頁面比較長如何導(dǎo)航”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識，請繼續(xù)關(guān)注億速云網(wǎng)站，小編會繼續(xù)努力為大家?guī)砀鄬嵱玫奈恼拢?/p>