快捷導(dǎo)航

vue項(xiàng)目中錨點(diǎn)定位替代方式

更新時(shí)間：2019年11月13日 11:26:50 作者：aydongzhiping

今天小編就為大家分享一篇vue項(xiàng)目中錨點(diǎn)定位替代方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧

在vue項(xiàng)目中，使用錨點(diǎn)定位會(huì)和router的規(guī)則沖突，在項(xiàng)目中的表現(xiàn)就是第一次點(diǎn)擊url改變了，但是沒(méi)有跳轉(zhuǎn)到錨點(diǎn)位置，再次點(diǎn)擊才會(huì)跳轉(zhuǎn)。所以在vue項(xiàng)目中定義一個(gè)方法不適用錨點(diǎn)定位：

  scrollToSection() {
   let section = document.getElementById('section')
   if (section) {
    section.scrollIntoView()
   }
  }

html標(biāo)簽中綁定click事件就可以了

以上這篇vue項(xiàng)目中錨點(diǎn)定位替代方式就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

基于Vue實(shí)例生命周期(全面解析)
下面小編就為大家?guī)?lái)一篇基于Vue實(shí)例生命周期(全面解析)。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2017-08-08
Vue全局共享數(shù)據(jù)之globalData,vuex,本地存儲(chǔ)的使用
這篇文章主要介紹了Vue全局共享數(shù)據(jù)之globalData,vuex,本地存儲(chǔ)的使用方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2023-10-10
Vue下拉框回顯并默認(rèn)選中隨機(jī)問(wèn)題
這篇文章主要介紹了Vue下拉框回顯并默認(rèn)選中隨機(jī)問(wèn)題，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2018-09-09
vue?navbar?tabbar導(dǎo)航條根據(jù)位置移動(dòng)實(shí)現(xiàn)定位、顏色過(guò)渡動(dòng)畫(huà)效果的代碼
這篇文章主要介紹了vue?navbar?tabbar導(dǎo)航條根據(jù)位置移動(dòng)實(shí)現(xiàn)定位、顏色過(guò)渡動(dòng)畫(huà)效果,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2022-08-08
vue-router傳參的4種方式超詳細(xì)講解
我們?cè)诮M件切換時(shí)經(jīng)常會(huì)有傳遞一些數(shù)據(jù)的需求,這樣就涉及到了路由傳參的問(wèn)題,下面這篇文章主要給大家介紹了關(guān)于vue-router傳參的4種超詳細(xì)方式,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
2022-07-07
vue使用vue-video-player插件播放視頻的步驟講解
在最近的項(xiàng)目中有一個(gè)視頻播放的功能,在之前的項(xiàng)目中沒(méi)有接觸過(guò)類(lèi)似的功能,第一次接觸,把具體操作步驟一下,這篇文章主要給大家介紹了關(guān)于vue使用vue-video-player插件播放視頻的相關(guān)資料,需要的朋友可以參考下
2022-12-12
降低vue-router版本的2種解決方法實(shí)例
vue-router是Vue.js官方的路由插件,它和vue.js是深度集成的,適合用于構(gòu)建單頁(yè)面應(yīng)用,下面這篇文章主要給大家介紹了關(guān)于降低vue-router版本的2種解決方法,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
2022-07-07
vue 實(shí)現(xiàn)input表單元素的disabled示例
今天小編就為大家分享一篇vue 實(shí)現(xiàn)input表單元素的disabled示例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2019-10-10
如何理解Vue簡(jiǎn)單狀態(tài)管理之store模式
狀態(tài)管理也就是數(shù)據(jù)狀態(tài)管理，vue應(yīng)用程序的各組件之間經(jīng)常需要進(jìn)行通信，除了v-on、EventBus等通信方式外，可以采用數(shù)據(jù)共享的方式進(jìn)行通信。這種簡(jiǎn)單的數(shù)據(jù)共享模式就是store模式。
2021-05-05
element實(shí)現(xiàn)二級(jí)菜單和頂部導(dǎo)航聯(lián)動(dòng)的示例
本文主要介紹了element實(shí)現(xiàn)二級(jí)菜單和頂部導(dǎo)航聯(lián)動(dòng)的示例，文中通過(guò)示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-02-02