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; 
}