zoukankan      html  css  js  c++  java
  • 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;
    }
  • 相关阅读:
    python3 TypeError: a bytes-like object is required, not 'str'
    Centos 安装Python Scrapy PhantomJS
    Linux alias
    Vim vimrc配置
    Windows下 Python Selenium PhantomJS 抓取网页并截图
    Linux sort
    Linux RSync 搭建
    SSH隧道 访问内网机
    笔记《鸟哥的Linux私房菜》7 Linux档案与目录管理
    Tornado 错误 "Global name 'memoryview' is not defined"
  • 原文地址:https://www.cnblogs.com/zifayin/p/8312677.html
Copyright © 2011-2022 走看看