# vue 首屏加载优化
# 只在当前页面设置 body 背景颜色
export default {
name: "index",
......
/*
* 进入路由之前执行的函数
* */
beforeRouteEnter(to, from, next) {
// 添加背景色
document.querySelector('body').setAttribute('style', 'background-color: #F9F9F9');
next()
},
/*
* 离开路由之后执行的函数
* */
beforeRouteLeave(to, from, next) {
// 去除背景色
document.querySelector('body').setAttribute('style', '');
next()
},
}
# 路由跳转携带参数
准备离开的路由
<template>
<router-link :to="{ name: 'index', params: { id: '123'}}">
<el-button type="primary">带参跳转</el-button>
</router-link>
</template>
name: '准备进入的路由名称', params: { id: '准备传的值'}
准备进入的路由
路由配置
{
path: '/index/:id',
name: 'index',
component: () => import('@/views/index')
},
index.vue
export default {
name: "index"
mounted() {
console.log(this.$route.params.id);
}
}
官方文档:路由组件传参
# 非父子组件传参
main.js
new Vue({
el: '#app',
......
data: {
bus: new Vue(),
}
});
A.vue
export default {
methods: {
search() {
// 创建事件
this.$root.bus.$emit('方法名', '需要传的值');
},
}
}
B.vue
export default {
......
methods: {
},
created(){ // 当前实例创建完成就监听这个事件
this.$root.bus.$on('方法名', value => {
console.log(value);
});
},
beforeDestroy() { // 在组件销毁时别忘了解除事件绑定
this.$root.bus.$off('方法名');
},
}
# 监听当前页面滚动条的高度,实现项目业务逻辑
export default {
name: "index",
mounted() {
/*
* window添加一个滚动监听事件
* */
window.addEventListener("scroll", this.directory);
},
methods: {
/*
* 滚动监听事件
* */
directory() {
let top = document.documentElement.scrollTop||document.body.scrollTop;
console.log(top);
},
},
/*
* 离开该页面,就要移除这个监听事件,不然会报错
* */
destroyed() {
window.removeEventListener("scroll", this.directory);
}
}
# 判断当前浏览设备是pc端还是移动端
_isMobile() {
let flag = navigator.userAgent.match(
/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i);
return flag;
},
/*
* 判断是px端返回 true,移动端返回 false
* */
pcOrMobile() {
if (this._isMobile()) {
// 手机端
return false;
}
// pc端
return true;
},
# 时间格式化
/*
* 时间格式化 yy-mm-dd hh-mm-ss
* */
timeConversion(time) {
var hh = time.getHours();
var mm = time.getMinutes();
var ss = time.getSeconds();
if (hh >=0 && hh<10){hh= '0' + hh;}
if (mm >=0 && mm<10){mm= '0' + mm;}
if (ss >=0 && ss<10){ss= '0' + ss;}
return time.getFullYear() + '-' + (time.getMonth() + 1) + '-' + time.getDate() + ' ' + hh + ':' + mm + ':' + ss;
},
# 滚动条动画
/*
* 滚动条滚动动画
* 设置滚动行为改为平滑的滚动
* */
rolling(top) {
window.scrollTo({
top: top, // 滚动位置
behavior: 'smooth' // 滚动模式
})
}
# axios图片上传(vant使用上传)
<template>
<div>
<van-uploader :after-read="afterRead" />
</div>
</template>
<script>
export default {
name: "index",
methods: {
afterRead(file) {
// 此时可以自行将文件上传至服务器
var formdata = new FormData();
formdata.append('file', file.file);
axios({
url: '/upload/saveImg',
method: 'post',
data: formdata,
headers: { 'Content-Type': 'multipart/form-data' },
}).then((res) => {
console.log(res.data)
})
}
}
}
</script>