vue《单纯我的总结》_2021年8月13日更新

VUE的页面跳转

this.$router.push

通过this.$router.push来跳转页面共有两种写url的方式，两种写参数的方式

具体使用

this.$router.push("/path")

this.$router.push({path:'',query:{}})

this.$router.push({name:'',params:{}})

区别
	query： url？id=1
	params: url/1
	query是拼接，parmas是类似resful
注意
	使用parmas传参的时候只能使用name
	使用query传参的时候只能使用path

this.$router与this.$route 的区别

通过注入路由器，我们可以在任何组件内通过 this.$router访问路由器，也可以通过this.$route 访问当前路由

可以理解为：

this.$router 相当于一个全局的路由器对象，包含了很多属性和对象（比如 history 对象），任何页面都可以调用其 push(), replace(), go() 等方法。

this.$route 表示当前路由对象，每一个路由都会有一个 route 对象，是一个局部的对象，可以获取对应的 name, path, params, query 等属性。
————————————————
版权声明：本文为CSDN博主「何必诗债换酒钱」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/u014395524/article/details/88194842

表单item

日期选择

使用标签

type来显示类型：year/month/date/dates/ week/datetime/datetimerange/ daterange/monthrange

format：日期格式

两个选择框 用type = “daterange” 来显示

<el-date-picker v-model="formParams.billingDateId" format="yyyyMMdd" type="date" 		       placeholder="查询日期" size="small">
</el-date-picker>

<el-date-picker v-model="formParams.value" type="daterange" unlink-panels 
	range-separator="至" start-placeholder="预变更开始日期"end-placeholder="预变更结束日期" 	 	:picker-options="pickerOptions" size="small" format="yyyyMMdd">
</el-date-picker>

表单校验

(1) form上面引入

在data定义规则，在《el-form》里面通过:rules来引入。对于个体来说在《el-form-item》通过prop来引入规则

	<el-form  :rules="FormRules" />
	 
	<el-form-item label="" prop="orgLevel">
	
    FormRules:{
    orgLevel: [{ required: true, message: '请选择汇总层级', trigger: 'blur' }],
    }

学习笔记

VUE的页面跳转
	this.$router.push
		具体使用
		params和query的区别和使用方法
		this.$router 与 this.$route 的区别
    全局路由对象和局部路由对象，拥有不同的方法
表单item
	日期选择
	表单校验