vue 實現(xiàn)錨點功能操作
最近遇到一個需求，進入頁面，滾動到錨點位置。
如何實現(xiàn)？
在router文件下的index.js中
配置：
1.配置
2.路由跳轉(zhuǎn)
3.設(shè)置錨點
最后，我遇到了一個問題，你npm run build 生成項目后測試，第一次進入成功，然后在頁面中操作一波，刷新，網(wǎng)頁打開失敗，
顯示找不到資源。（不知別人有沒有遇到過）
解決方案：將router文件夾下index.js中的mode:"history" 注釋掉。
補充知識：vue開發(fā)中，實現(xiàn)錨點定位及跳轉(zhuǎn)（url不發(fā)生變化）
如下所示：
<template>
<div>
<div id='header'></div>
<div class='footer' @click='returnTop'></div>
</div>
</template>
methods:{
returnTop(){
document.querySelector("#header").scrollIntoView(true);
}
}
document.querySelector(“要返回地方的id”).scrollIntoView(true);
HTML5選擇了scrollIntoView() 作為標(biāo)準(zhǔn)方法,scrollIntoView()可以在所有的HTML元素上調(diào)用。
通過滾動瀏覽器窗口或某個容器元素，調(diào)用元素就可以出現(xiàn)在視窗中。
如果給該方法傳入true作為參數(shù)，或者不傳入任何參數(shù)，那么 窗口滾動之后會讓調(diào)動元素頂部和視窗頂部盡可能齊平。
如果給該方法傳入false作為參數(shù)，調(diào)用元素會盡可能全部出現(xiàn)在視口中（可能的話，調(diào)用元素的底部會與視口的頂部齊平）不過頂部不一定齊平。
以上這篇vue 實現(xiàn)錨點功能操作就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
Vue如何動態(tài)改變列表搜索出關(guān)鍵詞的字體顏色
這篇文章主要介紹了Vue如何動態(tài)改變列表搜索出關(guān)鍵詞的字體顏色問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
Tailwind是由Adam Wathan領(lǐng)導(dǎo)的TailwindLabs開發(fā)的 CSS 框架，這篇文章主要介紹了vue3?tailwindcss的使用,需要的朋友可以參考下2023-08-08
Vue中scoped樣式的作用是通過在DOM結(jié)構(gòu)和CSS樣式上添加唯一標(biāo)記來實現(xiàn)樣式私有化和模塊化,這一功能是通過PostCSS轉(zhuǎn)譯實現(xiàn)的,總結(jié)了三條渲染規(guī)則：1. 為HTML DOM節(jié)點添加不重復(fù)的data屬性；2. 在每個CSS選擇器末尾添加當(dāng)前組件的data屬性選擇器2025-01-01
vue中$router.back()和$router.go()的用法
這篇文章主要介紹了vue中$router.back()和$router.go()的用法，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
vue+導(dǎo)航錨點聯(lián)動-滾動監(jiān)聽和點擊平滑滾動跳轉(zhuǎn)實例
今天小編就為大家分享一篇vue+導(dǎo)航錨點聯(lián)動-滾動監(jiān)聽和點擊平滑滾動跳轉(zhuǎn)實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11
vue監(jiān)聽input標(biāo)簽的value值方法
今天小編就為大家分享一篇vue監(jiān)聽input標(biāo)簽的value值方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08
這篇文章主要介紹了vue 中url 鏈接左邊的小圖標(biāo)更改問題，本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值,需要的朋友可以參考下2019-12-12
Vite創(chuàng)建Vue3項目及Vue3使用jsx詳解
vite是新一代的前端構(gòu)建工具,下面這篇文章主要給大家介紹了關(guān)于Vite創(chuàng)建Vue3項目以及Vue3使用jsx的相關(guān)資料,文中通過實例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-08-08
這篇文章主要介紹了Vue CLI3搭建的項目中路徑相關(guān)問題的解決，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-09-09
這篇文章主要為大家詳細(xì)介紹了Vue使用Echart圖標(biāo)插件之柱狀圖，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-04-04