vue项目开发中遇到的问题总结
(转自)https://www.cnblogs.com/zifayin/p/8312677.html
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;
}
