vue項目開發中遇到的問題總結--內部分享

 1.路由變化頁面數據不刷新問題

 

   這種情況一般出現在vue-router的history模式下，初次進入會執行鈎子函數，再次進入時則不會。

　解決方案： 監聽路由變化

watch : {
       "$route" (to, from) {
             if(to.path.indexOf('/home') > -1) {
            
                 this.initData()
            }
        }     
}                                    

 

2.setInterval路由跳轉繼續運行並沒有及時進行銷毀

　比如一些彈幕，走馬燈文字，這類需要定時調用的，路由跳轉之后，因為組件已經銷毀了，但是setInterval還沒有銷毀，還在繼續后台調用，控制台會不斷報錯，如果運算量大的話，無法及時清除，會導致嚴重的頁面卡頓。

　解決方案：在組件生命周期beforeDestroy停止setInterval

beforeDestory() {
    clearInterval(this.timer);
    MessageBox.close()                
}

 

3.vue 滾動行為用法，進入路由需要滾動到瀏覽器底部、頭部等等

使用前端路由，當切換到新路由時，想要頁面滾到頂部，或者是保持原先的滾動位置，就像重新加載頁面那樣。 vue-router 能做到，而且更好，它讓你可以自定義路由切換時頁面如何滾動。 注意：這個功能只在支持 history.pushState 的瀏覽器中可用。

解決方案：https://router.vuejs.org/zh-cn/advanced/scroll-behavior.html

 

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: [...]
     })    

4. 實現vue路由攔截瀏覽器的需求，進行一系列操作，如草稿保存等等

 為了防止用戶失誤點錯關閉按鈕等等，導致沒有保存已輸入的信息(關鍵信息)。

解決方法：在beforeRouteLeave鈎子中執行相應操作

beforeRouteLeave (to, from, next) {
      
　　if(用戶已經輸入信息){
        //出現彈窗提醒保存草稿，或者自動后台為其保存
　　}else{
      next(true);//用戶離開
　　}
}

 

5.v-once 只渲染元素和組件一次，優化更新渲染性能

v-once 這個指令相信大家用的很少，不過個人感覺還是挺實用的！

只渲染元素和組件一次。隨后的重新渲染，元素/組件及其所有的子節點將被視為靜態內容並跳過。這可以用於優化更新性能。

這個就不舉例子了，v-once（https://cn.vuejs.org/v2/api/#v-once）

 

6.本地開發沒有任何問題，部署服務器就404啊這些問題

由於前端路由緣故，單頁面應用應該放到nginx或者apache、tomcat等web代理服務器中，千萬不要直接訪問index.html，同時要根據自己服務器的項目路徑更改react或vue的路由地址。

如果說項目是直接跟在域名后面的，比如:http://www.declaring.com ，根路由就是 '/'。
如果說項目是直接跟在域名后面的一個子目錄中的，比如:http://www.declaring.com/root ，根路由就是 '/root '，不能直接訪問index.html。

以配置Nginx為例，配置過程大致如下：（假設：
1、項目文件目錄： /mnt/html/spa（spa目錄下的文件就是執行了npm run dist 后生成的dist目錄下的文件）
2、訪問域名：www.declaring.com） 
進入nginx.conf新增如下配置：

server {
    listen 80;
    server_name  www.declaring.com;
    root /mnt/html/spa;
    index index.html;
    location ~ ^/favicon\.ico$ {
        root /mnt/html/spa;
    }

    location / {
        try_files $uri $uri/ /index.html;
        proxy_set_header   Host             $host;
        proxy_set_header   X-Real-IP        $remote_addr;
        proxy_set_header   X-Forwarded-For  $proxy_add_x_forwarded_for;
        proxy_set_header   X-Forwarded-Proto  $scheme;
    }
    access_log  /mnt/logs/nginx/access.log  main;
}

注意事項：
1、配置域名的話，需要80端口，成功后，只要訪問域名即可訪問的項目
2、如果你使用了react-router的 browserHistory 模式或 vue-router的 history 模式，在nginx配置還需要重寫路由：

server {
    listen 80;
    server_name  www.declaring.com; 
    root /mnt/html/spa;  
    index index.html; 
    location ~ ^/favicon\.ico$ { 
　　　　root /mnt/html/spa;  
　　} 
    location / { 
　　　　try_files $uri $uri/ @fallback; 
　　　　index index.html; 
　　　　proxy_set_header Host $host; 
　　　　proxy_set_header X-Real-IP $remote_addr; 
　　　　proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; 
　　　　proxy_set_header X-Forwarded-Proto $scheme; 
　　} 
　　location @fallback { 
　　　　rewrite ^.*$ /index.html break;  
　　} 
　　access_log /mnt/logs/nginx/access.log main; 
}