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

vue项目开发中遇到的问题总结--内部分享的更多相关文章

  1. vue项目开发中遇到的问题总结

    (转自)https://www.cnblogs.com/zifayin/p/8312677.html 1.路由变化页面数据不刷新问题 这种情况一般出现在vue-router的history模式下,初次 ...

  2. vue项目开发中遇到的几个问题

    1.使用elment或者mintUI库时,需要全局引入ui库的css文件:然后在修改自己样式时,需要将自己的css文件引入到main.js中才会生效,全局引用2.使用v-html展示dom字符串时,相 ...

  3. vue项目开发中踩过的坑

    一.路由 这两天移动端的同事在研究vue,跟我说看着我的项目做的,子路由访问的时候是空白的,我第一反应是,不会模块没加载进来吧,还是....此处省略一千字... 废话不多说上代码 路由代码 { pat ...

  4. 【VUE】vue项目开发中,setTimeout等定时器的管理。

    如果在一个组件中使用了定时器,当通过路由切换页面的时候 1.如果有同一个组件,定时器会叠加. 解决方案: computed:{ timer: { set (val) { this.$store.sta ...

  5. VUE项目开发中使用WebSocket

    初始化WebSocket initWebSocket(){ //初始化weosocket const wsuri = 'ws://10.100.45.8:8888/websocket';//ws地址 ...

  6. vue项目webpack中Npm传递参数配置不同域名接口

    项目开发中,前端在配置后端api域名时很困扰,常常出现:本地开发环境: api-dev.demo.com测试环境: api-test.demo.com线上生产环境: api.demo.com, 这次是 ...

  7. Angular 项目开发中父子组件传参

    在项目开发中经常会遇到 组件之间传参的问题.今天总结下在使用angular的项目中父子组件传参的问题: 1.父组件向子组件传参: 然后在父组件中 然后在父组件的html中 然后就可以在子组件中使用了 ...

  8. Vue项目开发相关问题总结

    Vue项目开发相关问题总结 一.创建一个项目(两种方式) 1.通过CLI命令行创建,具体步骤如下: (1)Node 版本要求 Vue CLI 需要 Node.js 8.9 或更高版本 (推荐 8.11 ...

  9. Vue项目开发最新、最全代码规范文档

    Vue项目开发最新.最全代码规范文档 2019年02月21日 10:43:49 yw00yw 阅读数 337   一. 目录结构 |— build 构建脚本目录 |— build.js 生产环境构建( ...

随机推荐

  1. 【第二十一篇】手C# MVC 微信授权登录 OAuth2.0授权登录

    首先一定要熟读,最起码过一遍微信开发者文档 微信开发者文档 文档写的很清楚 授权登录四步走 在正文开始前,我得讲清楚一个事情 敲黑板,划重点:微信一共有两个 access_token 一个是7200就 ...

  2. JS中的数据类型和转换

    一.JS中的数据类型 js中的数据类型可以分为五种:number .string .boolean. underfine .null. number:数字类型 ,整型浮点型都包括. string:字符 ...

  3. 【Android】Mac下Android Studio设置App启动页

    先将启动页放到项目资源中,图片一般是1080*1920的jpg. 新建一个activity,如图: 创建成功之后,打开刚刚创建的activity,来进行代码的编写: public class BZLa ...

  4. 发布你的程序包到Nuget

    1.新建一个.NET Standard 的类库项目 2.选择项目熟悉,在 package 栏目下填写我们的nuget包信息 3.选择我们的项目,点击"Pack" 打包 主要注意的是 ...

  5. [LeetCode] Employee Free Time 职员的空闲时间

    We are given a list schedule of employees, which represents the working time for each employee. Each ...

  6. webstorm git团队开发技巧总结(一)

    ---恢复内容开始--- 1.git查看和修改用户名,邮箱 用户名和邮箱地址是本地git客户端的一个变量,不随git库而改变.每次commit都会用用户名和邮箱记录. (1)查看用户名和地址 git ...

  7. hdu 5877 线段树(2016 ACM/ICPC Asia Regional Dalian Online)

    Weak Pair Time Limit: 4000/2000 MS (Java/Others)    Memory Limit: 262144/262144 K (Java/Others)Total ...

  8. POJ 2289(多重匹配+二分)

    POJ 2289(多重匹配+二分) 把n个人,分到m个组中.题目给出每一个人可以被分到的那些组.要求分配完毕后,最大的那一个组的人数最小. 用二分查找来枚举. #include<iostream ...

  9. bzoj1531[POI2005]Bank notes 单调队列优化dp

    1531: [POI2005]Bank notes Time Limit: 5 Sec  Memory Limit: 64 MBSubmit: 559  Solved: 310[Submit][Sta ...

  10. VB.NET 泛型类型的应用经验

    VB.NET编程语言中的数据类型种类繁多,初学者要想全部掌握这些类型的应用是一个比较困难的步骤.今天我们先让大家了解一下VB.NET泛型类型这一高阶技术的应用,以便让大家对这一语言进行深入的解读. 定 ...