Vue採坑（持續更新）

setInterval路由跳轉繼續運行並無及時進行銷燬

好比一些彈幕，走馬燈文字，這類須要定時調用的，路由跳轉以後，由於組件已經銷燬了，可是setInterval尚未銷燬，還在繼續後臺調用，控制檯會不斷報錯，若是運算量大的話，沒法及時清除，會致使嚴重的頁面卡頓。

解決辦法：在組件生命週期beforeDestroy中止setInterval

//組件銷燬前執行的鉤子函數，跟其餘生命週期鉤子函數的用法相同。
beforeDestroy(){
     //我一般是把setInterval()定時器賦值給this實例，而後就能夠像下面這麼中止。
    clearInterval(this.intervalId);
},

監聽窗口變化

需求

響應窗口變化作一些事情

實現

// 1. 在mounted鉤子中建立監聽事件
mounted() {
    // 監聽窗口寬度變化
    window.onresize = () => {
      this.$store.commit(
        "SETCLIENTWIDTH",
        document.documentElement.clientWidth
      );
    };
}
// 2. 存儲視口信息（本次項目使用的是vuex，非必須）
SETCLIENTWIDTH(state, width) {
    state.clientWidth = width
},
// 3. 監聽視口信息變化
computed: {
    clientWidth() {
      return this.$store.state.clientWidth;
    }
}
// 4. 根據變化作相應操做
...

只提供大致思路，根據實際狀況可作變更

進入路由須要滾動到瀏覽器指定位置

注意: 這個功能只在支持 history.pushState 的瀏覽器中可用。

const router = new VueRouter({
   mode: 'history',
 scrollBehavior (to, from, savedPosition) {
     if (savedPosition) { //若是savedPosition存在，滾動條會自動跳到記錄的值的地方
       return savedPosition
     } else {
       return { x: 0, y: 0 }//savedPosition也是一個記錄x軸和y軸位置的對象
      }
     }，
   routes: [...]
 })

路由變化頁面數據不刷新

緣由

出現這種狀況是由於依賴路由的params參數獲取寫在created生命週期裏面,由於相同路由二次甚至屢次加載的關係 沒有達到監聽，退出頁面再進入另外一個文章頁面並不會運行created組件生命週期,致使文章數據仍是第一次進入的數據

解決辦法

• 方法一：watch監聽路由是否變化

watch: {
 // 方法1
  '$route' (to, from) { //監聽路由是否變化
    if(this.$route.params.articleId){// 判斷條件1  判斷傳遞值的變化
      //獲取文章數據
    }
  }
  //方法2
  '$route'(to, from) {
    if (to.path == "/page") {    /// 判斷條件2  監聽路由名 監聽你從什麼路由跳轉過來的
       this.message = this.$route.query.msg     
    }
  }
  
}

• 方法二：使用beforeRouteUpdate 守衛：

const User = {
  template: '...',
  beforeRouteUpdate (to, from, next) {
    // react to route changes...
    // don't forget to call next()
  }
}

# 路由組件懶加載

// 方式一
component: () => import("@/views/Login.vue")
// 方式二
component: resolve => require(["@/views/Register.vue"], resolve)