这篇博客中主要以vue组件为主，我会把工作中用到以及平常见到或是学习到的，与vue有关的组件的一些快速提高效率且好用的方法集中写在这里，此博客会一直持续更新。

1、v-for 循环出相同内容div

• 1. 你需要先渲染出一个div的效果图

image.png

• 2. 在data中定义一个数组list

data () {
    return {
      list: [1,2, 3,4,5,6,]   //数字为渲染出相同div的个数
     }

• 3. 在最外层的div上使用v-for来遍历

//item为循环中的每一项   //index为循环中的每一项的索引
<div class="type_border" v-for="(item,index) in list"> //list为data中定义的数组
        <div style="padding: 15px 0 10px 15px">
          <div style="display:inline-block">
            <el-button type="danger" size="mini" round>款项支付</el-button>
          </div>
          <div style="display:inline-block">
           <div style="font-size: 10px">2019/6/18 周二</div>
          </div>
          <div style="display:inline-block;float: right;margin-right: 10px">
            <el-button size="mini" round>待审核</el-button>
          </div>
        </div>
        <div style="padding: 0 0 12px 15px">
          <span style="font-size: 13px">设计CAD出图最后确认提交~</span>
        </div>
        <div style="padding: 0 0 15px 15px">
          <div style="display:inline-block;font-size: 13px;color: dodgerblue">阿拉蕾(项目设计师)</div>
          <div style="font-size: 11px;display: inline-block;float: right;margin-right: 20px">
            <el-link @click="nodeseeClick">节点可见人员</el-link>
          </div>
        </div>
      </div>

• 4. 页面上渲染出相同div

     
     image.png

2、vue路由传参，刷新后数据丢失

最近在做vue项目，页面之间有用到路由跳转，这两次发现刷新页面后，后台报错且数据丢失，查找后发现是页面刷新后，无法获取到上一级页面传过来的值，后来改用query传参就解决这个问题了。

• 1. 用params传值

     用params传值时，路由router中的index.js中的name和当前页面参数中的name一样

image.png

// 最开始，我用的是params来传值的，params传值刷新后导致页面数据丢失
methods: {
nodeseeClick(item){
   this.$router.push({
         name: 'nodesee',
         params: {
         andrProjectPointId: item.andr_project_point_id,
          andrProjectSignId: item.andr_project_sign_id,
          andrProjectId: item.andr_project_id,
          andrProjectGroupId: item.andr_project_group_id
          }
       })
    }
},
 created () {
    // 之前刷新报错，就是因为刷新在时候，不能从this.$route.params.中获取参数
    this.timeNode.andrProjectPointId = this.$route.params.andrProjectPointId
    this.timeNode.andrProjectSignId = this.$route.params.andrProjectSignId
    this.timeNode.andrProjectId = this.$route.params.andrProjectId
    this.timeNode.andrProjectGroupId = this.$route.params.andrProjectGroupId
  }

• 2. 用query传值

     用query传值时，路由router中的index.js中的path和当前页面参数中的path一样

image.png

// 更改为query传值后，刷新页面数据不丢失
methods: {
  this.$router.push({
        path: '/home/nodesee',  //这里是跳转的路
        query: {
          andrProjectPointId: item.andr_project_point_id,
          andrProjectSignId: item.andr_project_sign_id,
          andrProjectId: item.andr_project_id,
          andrProjectGroupId: item.andr_project_group_id
        }
      })
    },
created () {
    this.timeNode.andrProjectPointId = this.$route.query.andrProjectPointId
    this.timeNode.andrProjectSignId = this.$route.query.andrProjectSignId
    this.timeNode.andrProjectId = this.$route.query.andrProjectId
    this.timeNode.andrProjectGroupId = this.$route.query.andrProjectGroupId      // paramsn改为query传值了
  }
  通过 this.$route.query. xx（这里是动态的，根据自己的项目参数）来获取

• 3. params和query两者传值的区别就在于：query会把传递的参数显示在url地址中，就像下面这样，不过没太大关系，如是重要的数据就存在vuex中吧。

image.png

3、更改 a 标签<a href=""></a>默认颜色

image.png image.png

// 只需要在css中加上以下代码就可以了
a {
    text-decoration:none;  // 去掉超链接的默认下划线
    color:#fff; // 颜色根据需求改动
  }

4、点击图片跳转回首页

我这里用的是element-ui组件中的 image图片 ，链接如下
https://element.eleme.cn/#/zh-CN/component/image

• 1. 成功引入图片

<div>
  <div class="logo">
      <div v-for="fit in fits" :key="fit">
        <el-image
          style="width: 90%"
          :src="require('@/assets/img/ba_logo.png')"
          :fit="fit">
        </el-image>
      </div>
    </div>
</div>

image.png

• 2. 绑定点击click事件

<div>
  <div class="logo">
      <div v-for="fit in fits" :key="fit" @click="return_index">
        <el-image
          style="width: 90%"
          :src="require('@/assets/img/ba_logo.png')"
          :fit="fit">
        </el-image>
      </div>
    </div>
</div>

• 3.methods中写方法

methods:{
  // 点击擎天logo返回首页
    return_index () {
      window.location.href = 'http://localhost:8080/#/'  //这是将要跳转的路径
    }
}

这样，点击图片跳转回首页就完成了~~