vue 使用小结

# vue 首屏加载优化

1. vue 首屏优化加载（一）（懒加载）
2. vue 首屏优化加载（二）（Gzip压缩）
3. vue 首屏优化加载（三）（CND引用）

# 只在当前页面设置 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>