[推荐] Vue、Element、JS问题与解决办法总结

本文主要记载使用Vue、Element、JS中遇到的各种问题及解决方案.

目录

  • VUE
    • 1.使用NavMenu时重复点击当前菜单报错
    • 2.项目部署时,解决Vue项目有缓存问题
    • 3.注入式重新加载当前页面
      • 3.1 App.vue页面
      • 3.2 注入reload
      • 3.3 直接调用 this.reload(); 即可刷新整个页面
  • Element
    • 1.级联选择器children为空问题
    • 2. 表单下 Input按回车后会刷新页面问题
  • JS
    • 1.数组不同的部分
    • 2.时间转义汉字,如刚刚,几分钟前,几天前..

VUE

1.使用NavMenu时重复点击当前菜单报错

将下方代码块写入至 router.js 中即可

在这里插入图片描述

import Router from 'vue-router'
 
// 解决重复点击导航路由报错
const originalPush = Router.prototype.push;
Router.prototype.push = function push(location) {
     
  return originalPush.call(this, location).catch(err => err);
}

2.项目部署时,解决Vue项目有缓存问题

答:第一步,找到build目录下的webpack.prod.conf.js文件,并修改成下方代码样式,目的在于每一次生成的js包都是新的。

[推荐] Vue、Element、JS问题与解决办法总结_第1张图片
第二步,在 根目录 找到 index.html 页面
添加如下代码,该代码是设置index.html这个页面不进行缓存,每次获取最新的

    <meta http-equiv="pragram" content="no-cache">
    <meta http-equiv="cache-control" content="no-cache, no-store, must-revalidate">
    <meta http-equiv="expires" content="0">

3.注入式重新加载当前页面

3.1 App.vue页面

[推荐] Vue、Element、JS问题与解决办法总结_第2张图片

3.2 注入reload

在这里插入图片描述

3.3 直接调用 this.reload(); 即可刷新整个页面

Element

1.级联选择器children为空问题

	methods:{
     
	getUserData(){
     
		axios({
     url,params}).then(res=>{
     
			this.arrayItem= this.getTreeData(data);//在网络请求这里进行递归
		})
	}
	//递归函数
    getTreeData(data){
     	
      data.forEach(item => {
     
        if(item.children.length<1){
     
          item.children=undefined;
        }else{
     
          this.getTreeData(item.children)
        }
      });
      return data;
    }
    }

2. 表单下 Input按回车后会刷新页面问题

添加该属性 @submit.native.prevent

<el-form @submit.native.prevent></el-form>	

JS

1.数组不同的部分

/**instend(one,tow)
 * 得到两个数组中不同部分
 * 参数 :两个数组
 */    
 
function instend(one,tow){
     
   //var a = one;
   //var b = tow;
   var c = [];
   var tmp = one.concat(tow); 
   var o = {
     };
   for (var i = 0; i < tmp.length; i ++) (tmp[i] in o) ? o[tmp[i]] ++ : o[tmp[i]] = 1;
   for (x in o) if (o[x] == 1) c.push(x);
   return c;
}

2.时间转义汉字,如刚刚,几分钟前,几天前…

function timeParseChn (val) {
     
  if (!val) {
     
    return false
  }
  let _time=new Date(val);
  //let _time = val.replace(/\-/g, "/")
  // 将实际时间转为中国标准时间
  //_time = _time + ' GMT+0800'
  let realTime = new Date(_time).getTime()
  // 当前时间也转为中国标准时间
  let _nowTime = new Date().toLocaleString('chinese', {
     hour12: false})
  _nowTime = _nowTime + ' GMT+0800'
  let nowTime = new Date(_nowTime).getTime()

  let diffValue = nowTime - realTime
  if (diffValue < 0) {
     
    return
  }
  let  _min = diffValue / (60 * 1000) // 以min为维度
  if (_min < 1) {
     
    return '刚刚'
  } else if (_min >=1 && _min < 10) {
     
    return '1分钟前'
  } else if (_min >= 10 && _min < 30) {
     
    return '10分钟前'
  } else if (_min >= 30 && _min < 60) {
     
    return '半小时前'
  } else if (_min >= 60 && _min < 60 * 24) {
     
    return Math.floor(_min / 60) + '小时前'
  } else if (_min >= 60 * 24 && _min < 60 * 24 * 7) {
     
    return Math.floor(_min / (60*24)) + '天前'
  } else {
     
   return Math.floor(_min / (60*24)) + '天前'
  }
}

你可能感兴趣的:(vue,vue,js,html)