【vue+element】开发浏览器报错、相同路由不能刷新、UI表头样式、POST请求后端接受不到、UI表格固定列错位等解决方案

Customize configuration

 项目打包 新建vue.config.js文件
 module.exports = {
  publicPath: './',
    outputDir: 'dist',
    assetsDir:'static'
 }
 使用命令打包 npm run build
 或者使用vue ui 在浏览器上打包
 日期格式化
 添加过滤器 filters
 

element ui 表单验证

第一种常用方式：表单上加rules｛object｝
<el-form class="apply-form first-form" :model="formData" :rules="rule" ref="form">
    <el-form-item label="姓名" prop="visitorName">
        <el-input v-model="formData.visitorName" placeholder="请输入姓名" clearable></el-input>
    </el-form-item>
    <el-form-item label="身份证号" prop="cardCode">
       <el-input v-model="formData.cardCode" :maxlength="18" placeholder="请输入身份证号" clearable></el-input>
    </el-form-item>
</el-form>
 这种方式需要在data()中写入rule{},对于需要校验字段prop中的如visitorName写上验证规则
 data() {
    return {
        formData: {
            visitorName: '',
            cardType: 1,
            cardCode: ''
        },
        rule: {
            visitorName: [
                { required: true, message: '请输入姓名', trigger: 'blur' },
                { min: 2, max: 10, message: '长度在 2 到 10 个字符', trigger: 'blur' },
                {
                         required: true,
                         pattern: /^[\u4e00-\u9fa5_a-zA-Z0-9.·-]+$/,
                         message: '姓名不支持特殊字符',
                         trigger: 'blur'
                }
           ],
           cardCode: [
               { required: true, message: '请输入身份证号', trigger: 'blur' },
               { min: 15, max: 18, message: '请如实填写18位号码，以供学校保卫科核对', trigger: 'blur' },
               {
                    required: true,
                    pattern: /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/,
                    message: '请输入正确的身份证号码',
                    trigger: 'blur'
               }
           ]
       }
    }
 }

子组件给父组件传值

	子组件 <input @click="sendMsg" type="button" value="给父组件传递值">
	data () {
	
	        return {
	
	            //将msg传递给父组件
	
	            msg: "我是子组件的msg",
	
	        }
	
	    },
	
	     methods:{
	
	         sendMsg(){
	
	             //func: 是父组件指定的传数据绑定的函数，this.msg:子组件给父组件传递的数据
	
	             this.$emit('func',this.msg)
	
	         }
	
	     }
		 子组件通过this.$emit()的方式将值传递给父组件
		 父组件 这里的func是父组件中绑定的函数名
		  <child @func="getMsgFormSon"></child>
		   methods:{
		  
		              getMsgFormSon(data){
		  
		                  this.msgFormSon = data
		  
		                  console.log(this.msgFormSon)
		  
		              }
		  
		      }

解决浏览报路由错NavigationDuplicated {_name: “NavigationDuplicated”, name: “NavigationDuplicated”}]

	thah.$router.push({
		name: "shopping",
		params: {
			state: 3
		}
	}).catch(); 添加catch()方法
	<!-- 高本的路由需要重写router方法 -->
	// 重写路由
	const routerPush = VueRouter.prototype.push
	VueRouter.prototype.push = function push(location) {
	  return routerPush.call(this, location).catch(error => error)
	}

解决跳转相同路由不能刷新的问题

在路由跳转的时候加上一个时间戳：

this.$router.push({
    name:"...",
    query:{
        t: Date.now(),
    },
})

然后在router-view上加上key属性，值为这个时间戳：

<router-view :key="$route.query.t" /> 

element ui 表头样式设置

    <el-table :data='userList' style="width:100%;"  border :header-cell-style="{background:'#F5F7FA',color:'#606266'}">
	:header-cell-style="{background:'#F5F7FA',color:'#606266'}" 就是设置表头背景颜色

Vuex持久化插件(vuex-persistedstate)解决刷新数据消失的问题

使用axios 需要先使用qs将数据转换

生命周期

beforeCreadted	vue实例的挂载元素$el和数据对象data都为undefined，还未初始化。	加loading事件
created	vue实例的数据对象data有了，$el还没有	结束loading、请求数据为mounted渲染做准备
beforeMount	vue实例的$el和data都初始化了，但还是虚拟的dom节点，具体的data.filter还未替换。	...
mounted	vue实例挂载完成，data.filter成功渲染	配合路由钩子使用
beforeUpdate	data更新时触发
updated	data更新时触发	数据更新时，做一些处理（此处也可以用watch进行观测）
beforeDestroy	组件销毁时触发
destroyed	组件销毁时触发，vue实例解除了事件监听以及和dom的绑定（无响应了），但DOM节点依旧存在	组件销毁时进行提示

调用百度地图

	https://dafrok.github.io/vue-baidu-map/#/zh/index API地址
	

axios 发 post 请求，后端接收不到参数的解决方案

	
	问题原因
	要点1
	原因就是这次的接口使用 java spring mvc 
	并且在这个方法上使用了注解 @RequestParam
	问题2 请求头的问题 'Content-Type': 'application/x-www-form-urlencoded'
	那么这个是什么意思呢，这个是只能从请求的地址中取出参数，也就是只能从 username=admin&password=admin这种字符串中解析出参数。
	解决方案一
	【用 URLSearchParams 传递参数】
	let param = new URLSearchParams()
	param.append('username', 'admin')
	param.append('pwd', 'admin')
	axios({
	    method: 'post',
	    url: '/api/lockServer/search',
	    data: param
	})
	需要注意的是： URLSearchParams 不支持所有的浏览器，但是总体的支持情况还是 OK 的，所以优先推荐这种简单直接的解决方案
	解决方案二 引入 qs ，这个库是 axios 里面包含的，不需要再下载了。
	解决方案三 axios({
    url: '/api/lockServer/search',
    method: 'post',
    transformRequest: [function (data) {
        // 对 data 进行任意转换处理
        return Qs.stringify(data)
    }],
    headers: {
        'deviceCode': 'A95ZEF1-47B5-AC90BF3'
    },
    data: {
        username: 'admin',
        pwd: 'admin'
    }
})
	解决方案四 【重写一个 axios 实例，重新实现属于我们自己的 transformRequest】
	解决方案五
		axios.post('/api/lockServer/search',"userName='admin'&pwd='admin'");
		解决方案六
		我们知道现在我们服务端同学接收参数用的是 @RequestParam（通过字符串中解析出参数） 
		其实还有另一种是 @RequestBody（从请求体中获取参数）。

	
	

解决element 表格组件 固定列错位

<el-table ref="multipleTable" 
that.$nextTick(() => {
	that.$refs.multipleTable.doLayout()
})