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

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

成都創(chuàng)新互聯(lián)公司主營(yíng)什邡網(wǎng)站建設(shè)的網(wǎng)絡(luò)公司,主營(yíng)網(wǎng)站建設(shè)方案,app軟件開發(fā),什邡h5成都微信小程序搭建,什邡網(wǎng)站營(yíng)銷推廣歡迎什邡等地區(qū)企業(yè)咨詢

錨點(diǎn)導(dǎo)航

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

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

（1）定義錨點(diǎn)

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

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

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

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

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

（3）定義滾動(dòng)指令

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

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>

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

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

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

（1）安裝Element UI

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

npm install element-ui -S

（2）引入Element UI組件

在Vue實(shí)例中引入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)航項(xiàng)，如下所示：

<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">選項(xiàng)1</el-menu-item>
        <el-menu-item index="/index1-2">選項(xiàng)2</el-menu-item>
      </el-menu-item-group>
      <el-menu-item-group title="分組二">
        <el-menu-item index="3">選項(xiàng)3</el-menu-item>
      </el-menu-item-group>
      <el-submenu index="4">
        <template slot="title">選項(xiàng)4</template>
        <el-menu-item index="/index1-3">選項(xiàng)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">選項(xiàng)1</el-menu-item>
      <el-menu-item index="/index2-2">選項(xiàng)2</el-menu-item>
      <el-menu-item index="/index2-3">選項(xiàng)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">選項(xiàng)1</el-menu-item>
      <el-menu-item index="/index3-2">選項(xiàng)2</el-menu-item>
      <el-menu-item index="/index3-3">選項(xiàng)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
})

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

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

（1）安裝Vue插件

在Vue項(xiàng)目中使用回到頂部插件前，需要先安裝插件，可以通過如下命令進(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頁面比較長(zhǎng)如何導(dǎo)航”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識(shí)，請(qǐng)繼續(xù)關(guān)注創(chuàng)新互聯(lián)網(wǎng)站，小編會(huì)繼續(xù)努力為大家?guī)砀鄬?shí)用的文章！

分享標(biāo)題：vue頁面比較長(zhǎng)如何導(dǎo)航
分享路徑：http://muchs.cn/article32/ihsgsc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供關(guān)鍵詞優(yōu)化、品牌網(wǎng)站設(shè)計(jì)、、服務(wù)器托管、域名注冊(cè)、網(wǎng)站維護(hù)

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容