快捷導(dǎo)航

vue如何設(shè)置描點跳轉(zhuǎn)到對應(yīng)頁面

更新時間：2024年05月24日 11:48:24 作者：沐卿?

這篇文章主要介紹了vue如何設(shè)置描點跳轉(zhuǎn)到對應(yīng)頁面問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教

vue設(shè)置描點跳轉(zhuǎn)到對應(yīng)頁面

<div id="app">
  <a href="#target" rel="external nofollow" >點擊跳轉(zhuǎn)到某個位置</a>
  <div class="spacer"></div> <!-- 這里添加一些空間以展示效果 -->
  <div id="target">目標(biāo)位置</div>
</div>

vue錨點跳轉(zhuǎn)到對應(yīng)位置（精確定位）

安裝：

npm install --save vue-scrollto

main.js引入

import Vue from 'vue'
var VueScrollTo = require('vue-scrollto');
Vue.use(VueScrollTo)

頁面引用：

<template>
  <div class="scrollDemo">
    <div class="demoNav flex-center-center">
      <div
        class="demoNavItem"
        v-for="(item,index) in demoNavItem"
        :key="index"
        :class="{navActive : idx==index}"
        @click="changNav(index)"
      >{{item}}</div>
    </div>
    <div class="demoContent">
        <!-- 如果內(nèi)容為循環(huán)，id則定義為:id="'demoItem'+index" -->
      <div class="demoItem0 demoItem" id="demoItem0">谷歌瀏覽器內(nèi)容</div>
      <div class="demoItem1 demoItem" id="demoItem1">uc瀏覽器內(nèi)容</div>
      <div class="demoItem2 demoItem" id="demoItem2">IE瀏覽器內(nèi)容</div>
      <div class="demoItem3 demoItem" id="demoItem3">火狐瀏覽器內(nèi)容</div>
      <div class="demoItem4 demoItem" id="demoItem4">360瀏覽器內(nèi)容</div>
      <div class="demoItem5 demoItem" id="demoItem5">獵豹瀏覽器內(nèi)容</div>
    </div>
  </div>
</template>

<script>
// 引入
var VueScrollTo = require("vue-scrollto");
export default {
  data() {
    return {
      idx: 0,
      demoNavItem: [
        "谷歌瀏覽器",
        "uc瀏覽器",
        "IE瀏覽器",
        "火狐瀏覽器",
        "360瀏覽器",
        "獵豹瀏覽器",
      ],
    };
  },
  methods: {
    // 導(dǎo)航選中效果
    changNav(index) {
      this.idx = index;
      VueScrollTo.scrollTo(document.getElementById("demoItem" + index), 1000, {
        offset: -50,
      });
    },
  },
};
</script>

<style  scoped>
 
.flex-center-center {
  display: flex;
  align-items: center;
  justify-content: center;
}
.demoNav {
    width: 100%;
    height: 70px;
    background: rgba(0, 31, 144, 1);
    position: sticky;
    left: 0;
    top: 0;
}
.demoNavItem {
  font-size: 40px;
  color: #fff;
  margin-left: 30px;
  cursor: pointer;
}
.navActive {
  color: red;
}
.demoItem {
  width: 100%;
  height: 600px;
  font-size: 60px;
  color: #fff;
  text-align: center;
  padding: 60px 0 0 0;
}
.demoItem0{
  background: gold;
}
.demoItem1 {
  background: red;
}
.demoItem2 {
  background: chartreuse;
}
.demoItem3 {
  background: cornflowerblue;
}
.demoItem4 {
  background: cyan;
}
.demoItem5 {
  background: darkmagenta;
}
</style>

效果圖：