写代码的记录

以下方法都是从网络上各处搬运学习，自己记录一下方便日后使用

一、vue两个页面间传递值（如id等）

方法1 query （适用于一个通过router跳转到另外一个页面）

 传值：

this.$router.push({

        path: "/songlist",

        query: { myindex: index, id: id },

      });

接收（我是在第二个页面的created中接收）：

created() {

    var myindex = this.$route.query.myindex;

    var id = this.$route.query.id;

    this.myindex = myindex;

    this.id = id;

}

方法2 将数据存储到本地

当我的页面从一跳转到二，再二跳转到三想要将页面一的id传递给三  感觉方法 1有点不尽人意 然后又学习了方法2后成功

存储：

localStorage.setItem("id", id);

第一个“id”是名字  第二个是我要存储的变量id 取值是根据名字“id”来取

取值（同样先在created中取出来）：
 

created() {

    var id = localStorage.getItem("id");

    this.id = id;

  },

二  将旧数组中的某些项组成新数组

 this.newArr = this.oldArr.map(function (item, index) {

              return { id: item.id, name: item.name, picUrl: item.al.picUrl };

            }); 

在控制台输出后生成的新数组中只包含我们想要的键值对

1:

        id: (...)

        name: (...)

        picUrl: (...)

    2:

          id: (...)

          name: (...)

          picUrl: (...)

三. 第二个后端接口需要使用第一个后端接口返回的数据，于是在第一个后端接口内部调用第二个后端接口来获得想要的数据

this.axios
          .get(`/user/account`)
          .then((res) => {
            this.countinfo = res.data.profile;
            this.id = this.countinfo.userId;
            // 获取用户歌单
            this.axios
              .get(`/user/playlist?uid=${this.id}`)
              .then((res) => {
                this.playlist = res.data.playlist;
              })
              .catch((err) => {
                console.log(err);
              });
          })
          .catch((err) => {
            console.log(err);
          });

四 组件的封装与调用（vue中一个组件在多个页面使用）

  1.这是我需要在各处使用的页脚 文件名为  Footer.vue

<template>
  <div class="footersty">
    <span class="el-icon-lollipop" @click="gohome">发现</span>
    <span class="el-icon-cherry" @click="goblog">博客</span>
    <span class="el-icon-ice-tea" @click="gomy">我的</span>
    <span class="el-icon-watermelon" @click="gofoucs">关注</span>
    <span class="el-icon-ice-cream" @click="govillage">云村</span>
  </div>
</template>

<script>
export default {
  methods: {
    gohome() {
      this.$router.push("/home");
    },
    goblog() {
      this.$router.push("/blog");
    },
    gomy() {
      this.$router.push("/my");
    },
    gofoucs() {
      this.$router.push("/foucs");
    },
    govillage() {
      this.$router.push("/village");
    },
  },
};
</script>

<style scoped>
.footersty {
  font-size: 18px;
}
span {
  margin-left: 10px;
  cursor: pointer;
}
</style>

 2.   先在script中引用 再写在构造器内

<script>
import Footer from "./Footer.vue";
export default {
  components: { Footer },
}
</script>

3 . 在页面上使用

!-- 页脚 -->
    <div class="footerdiv">
      <Footer />
    </div>