亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

vue-router中scrollBehavior的巧妙用法

 更新時間：2018年07月09日 11:31:13   作者：卸帳篷的黑人  
本文給大家介紹vue-router中scrollBehavior的妙用,文中給大家提到了兩種解決方案，需要的朋友可以參考下

問題:使用keep-alive標(biāo)簽后部分安卓機返回緩存頁位置不精確問題

解決方案:

<div id="app">
  <keep-alive>
   <router-view v-if="$route.meta.keepAlive"></router-view>
  </keep-alive>
  <router-view v-if="!$route.meta.keepAlive"></router-view>
</div>
const router = new Router({
 scrollBehavior(to, from, savedPosition) {
  if (savedPosition && to.meta.keepAlive) {
   return savedPosition;
  }
  return { x: 0, y:0 };
 },
});

2. 頁面返回出現(xiàn)空白屏問題

問題

【前提】：iOS設(shè)備
【步驟】: 頁面A是個列表很長-->滑到頁腳的時候點擊跳轉(zhuǎn)之后到頁面B--->再返回A頁面
         --->屏幕會出現(xiàn)空白遮罩層--->手指輕觸屏幕滑動--->遮罩層消失

 

解決方案一

在接口請求成功后的回調(diào)操作完成后進行該操作,例如

// fetchCourseList是一個封裝好的Promise請求
fetchCourseList().then(({ data: courses }) => {
 this.courses = courses;
}).then(() => {
  setTimeout(() => {
    window.scrollTo(0, 1);
    window.scrollTo(0, 0);
  });
});

該方案的弊端: 每個頁面都需要做這樣的處理，不推薦使用。

解決方案二(推薦)

使用scrollBehavior中的異步滾動操作

const router = new Router({
 scrollBehavior(to, from, savedPosition) {
  // keep-alive 返回緩存頁面后記錄瀏覽位置
  if (savedPosition && to.meta.keepAlive) {
   return savedPosition;
  }
  // 異步滾動操作
  return new Promise((resolve) => {
   setTimeout(() => {
    resolve({ x: 0, y: 1 });
   }, 0);
  });
 },
});

該方案直接在路由進行處理，兼容每個頁面并且頁面加載完后并也不會產(chǎn)生1px的滾動位置。

總結(jié)

以上所述是小編給大家介紹的vue-router中scrollBehavior的巧妙用法，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！

相關(guān)文章

  • Vite配置優(yōu)雅的code?spliiting代碼分割詳解

    Vite配置優(yōu)雅的code?spliiting代碼分割詳解

    這篇文章主要為大家介紹了Vite配置優(yōu)雅的code?spliiting代碼分割詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
    2022-08-08
  • 使用proxytable 配置解決 vue-cli 的跨域請求問題【推薦】

    使用proxytable 配置解決 vue-cli 的跨域請求問題【推薦】

    這篇文章主要介紹了利用 proxytable 配置解決 vue-cli 的跨域請求問題,本文的目錄結(jié)構(gòu)基于 webpack 模板結(jié)構(gòu)，需要的朋友可以參考下
    2018-05-05
  • vue利用Moment插件格式化時間的實例代碼

    vue利用Moment插件格式化時間的實例代碼

    Moment.js 是一個 JavaScript 日期處理類庫，用于解析、檢驗、操作、以及顯示日期。這篇文章主要給大家介紹了關(guān)于vue利用Moment插件格式化時間的相關(guān)資料,需要的朋友可以參考下
    2021-05-05
  • Vue中對比scoped css和css module的區(qū)別

    Vue中對比scoped css和css module的區(qū)別

    這篇文章主要介紹了Vue中scoped css和css module的區(qū)別對比，scoped css可以直接在能跑起來的vue項目中使用而css module需要增加css-loader配置才能生效。具體內(nèi)容詳情大家參考下本文
    2018-05-05
  • Vue中進行路由懶加載的示例詳解

    Vue中進行路由懶加載的示例詳解

    路由懶加載是一種優(yōu)化Vue應(yīng)用程序性能的技術(shù)，本文介紹了Vue中如何進行路由懶加載，包括使用Vue異步組件和Webpack代碼分割,需要的朋友可以參考下
    2023-06-06
  • vue中mapbox地圖顯示一半的問題及解決方法

    vue中mapbox地圖顯示一半的問題及解決方法

    在vue中創(chuàng)建mapbox地圖，地圖只顯示一般，查看瀏覽器開發(fā)者工具，發(fā)現(xiàn)將canvas.mapboxgl-canvas 的position:absolute去掉就解決了，今天小編通過本文給大家分享詳細過程，感興趣的朋友跟隨小編一起看看吧
    2023-07-07
  • Vue2和Vue3如何使用watch偵聽器詳解

    Vue2和Vue3如何使用watch偵聽器詳解

    這篇文章主要介紹了在Vue2和Vue3中如何使用watch偵聽器，分別對vue2及vue3作了詳細的說明，有需要的朋友可以借鑒參考下，希望能夠有所幫助
    2021-09-09
  • Vue新手指南之環(huán)境搭建及入門

    Vue新手指南之環(huán)境搭建及入門

    vue就是前端上的Java,前端上的C#,有個前端的虛擬DOM引擎,設(shè)計理念和Java/C#類似,這篇文章主要給大家介紹了關(guān)于Vue新手指南之環(huán)境搭建及入門的相關(guān)資料,需要的朋友可以參考下
    2021-08-08
  • Vue路由與a標(biāo)簽鏈接錨點發(fā)生沖突問題及解決

    Vue路由與a標(biāo)簽鏈接錨點發(fā)生沖突問題及解決

    這篇文章主要介紹了Vue路由與a標(biāo)簽鏈接錨點發(fā)生沖突問題及解決方案,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
    2024-03-03
  • 在Vue3中為路由Query參數(shù)標(biāo)注類型的方法

    在Vue3中為路由Query參數(shù)標(biāo)注類型的方法

    這篇文章主要介紹了在Vue3中如何為路由Query參數(shù)標(biāo)注類型,我們就針對這個話題如何為路由Query參數(shù)標(biāo)注類型為例,看看Composable和IOC容器的代碼風(fēng)格究竟有什么不同,需要的朋友可以參考下
    2024-08-08

最新評論