1. 前言

在之前的項(xiàng)目中，需要實(shí)現(xiàn)一個(gè)監(jiān)控token是否過期從而動(dòng)態(tài)刷新token的功能，然而在登錄成功后創(chuàng)建的監(jiān)控器會(huì)在瀏覽器刷新點(diǎn)擊或者是通過導(dǎo)航欄輸入網(wǎng)址時(shí)銷毀...

2. 試錯(cuò)

前前后后始過很多方法，在這里就記錄一下也許也能為各位讀者排雷

2.1 window.addEventListener

一開始想到的是在每一個(gè)頁面上加一個(gè)監(jiān)聽listener，監(jiān)聽頁面加載事件，沒當(dāng)加載時(shí)候就調(diào)用檢測(cè)token的方法，但是實(shí)際測(cè)試中并不能完全實(shí)現(xiàn)（主要在瀏覽器刷新點(diǎn)擊）個(gè)人猜測(cè)可能是緩存問題，有時(shí)瀏覽器緩存可能導(dǎo)致腳本不按預(yù)期運(yùn)行。

window.addEventListener('load', () => {
   console.log(11)
   onPageRender();
});

2.2 defineComponent

由于本人的項(xiàng)目是ts+vue的編譯，一開始沒想到用這個(gè)，就有了如下測(cè)試，即是在defineComponent中使用mounted鉤子函數(shù)，每當(dāng)頁面動(dòng)態(tài)刷新時(shí)都會(huì)調(diào)用生成監(jiān)控器

<script lang="ts">
    import { defineComponent } from 'vue';
    import { onPageRender } from '@/utils/tokenMonitor'
    export default defineComponent({
        name: 'MyComponent',
    
        mounted() {
          // 在這里編寫你的頁面渲染邏輯
          onPageRender();
        },
    });
</script>

 但是在實(shí)際測(cè)試的過程中也是有時(shí)候正常有時(shí)候不正常，可能是我ts中使用響應(yīng)式編程一些變量函數(shù)定義在這個(gè)defineComponent外面的原因（如下圖所示），反正就是不能完美解決我的需求

3. 解決方案

在上圖中使用 <script setup> 來定義script，官方的解釋是這個(gè)setup就是會(huì)默認(rèn)導(dǎo)出script中定義的所有內(nèi)容，所以就不能再使用export default進(jìn)行導(dǎo)出（ts會(huì)報(bào)錯(cuò)A module cannot have multiple default exports?。。┰摴俜浇忉屧斠?a rel="external nofollow" target="_blank">script setup

在閱讀官方文檔的時(shí)候也是意外發(fā)現(xiàn)了最終的解決方案（在Using Custom Directives處，可以搜索一下）或者看我下面截圖（不一定能正常顯示，看得到最好啦??）

這里使用本地自定義指令，對(duì)于前端小白來說是一個(gè)新東西，根據(jù)官網(wǎng)的代碼示例來改寫代碼就有了最終成功版本，此時(shí)每當(dāng)頁面加載到這個(gè)h1標(biāo)簽時(shí)候，就會(huì)執(zhí)行vMonitorDirective中定義的beforeMount添加監(jiān)控器，防止網(wǎng)站刷新時(shí)候被kill掉。最終測(cè)試結(jié)果也是正和我意，完美解決問題在此記錄一下

const vMonitorDirective = {
  beforeMount: () => {
    // do something with the element
    onPageRender();
  }
}

// 綁定處，注意命名規(guī)范
<h1 v-Monitor-directive class="page-title">Orders</h1>

到此這篇關(guān)于vue實(shí)現(xiàn)頁面渲染時(shí)候執(zhí)行某需求的示例代碼的文章就介紹到這了,更多相關(guān)vue 頁面渲染執(zhí)行某需求內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！ 

最新評(píng)論