Vue - 简单的列表展示实现

效果图：

<template>
  <div class="Message">
    <TabBar :title="title" :can-back="false" />
    <div class="cell-bg">
      <!--      <div v-for="item in dataArr" :key="item.id" v-on:click="onclick(item)">-->
      <div v-for="item in dataArr" :key="item.id" @click="onclick(item)">
        <div class="cell">{
     {
      item.text }}</div>
        <!-- <router-link :to="{path:'/message/alarm/List', query: {passValue:1111}}"> 
          <div class="cell">{
     {
      item.text }}</div>
        </router-link> -->
      </div>
    </div>
  </div>
</template>

<script>
import TabBar from "../../components/TabBar";

export default {
     
  components: {
     
    TabBar
  },
  data: function() {
     
    return {
     
      title: "标题",
      dataArr: [
        {
      id: 1, text: 111 },
        {
      id: 2, text: "222" },
        {
      id: 3, text: "333" }
      ]
    };
  },
  methods: {
     
    onclick: function(item) {
     
      console.log("点击cell");
      console.log(JSON.stringify(item));
      console.log(item.text);

      this.$router.push({
     
        path: "/message/alarm/List",
        params: {
      passValue: 111222 }
      });

      // this.$router.push({
     
      //   path: "/message/alarm/List",
      //   query: { passValue: 111222 }
      // });
    }
  },

  // 在实例初始化之前调用
  beforeCreate() {
     
    console.log("创建前：");
    console.log(this.$el);
    console.log(this.$data);
  },
  // 在实例初始化之后调用，经常用于操作数据，发起ajax请求
  created() {
     
    console.log("创建完成：");
    console.log(this.$el);
    console.log(this.$data);
  },
  // 在挂载开始之前被调用，如果是在服务器端渲染时不被调用；在这个函数里，无法获取元素
  beforeMount() {
     
    console.log("挂载前：");
    console.log(this.$el);
    console.log(this.$data);
  },
  // 在挂载后被调用，也不能在服务器端渲染时被调用；这个函数里，是可以获取元素，并进行操作的
  mounted() {
     
    console.log("挂载完成：");
    console.log(this.$el);
    console.log(this.$data);
  },
  // 视图层数据更新前调用，发生在虚拟 DOM 打补丁之前。这里适合在更新之前访问现有的 DOM
  beforeUpdate() {
     
    console.log("=即将更新渲染=");
    let name = this.$refs.app.innerHTML;
    console.log("name:" + name);
  },
  // 视图层数据更新后调用
  updated() {
     
    console.log("==更新成功==");
    let name = this.$refs.app.innerHTML;
    console.log("name:" + name);
  },
  // 实例销毁之前调用，在被销毁的组件中进行调用;有一些操作，会在实例已经销毁的时候还在运行，这时候为了性能考虑，就在这里结束哪些操作
  beforeDestroy() {
     
    console.log("销毁前：");
  },
  // 实例销毁后调用。
  destroyed() {
     
    console.log("销毁完成：");
  }
};
</script>
<style scoped>
.cell-bg {
     
  background: yellow;
}

.cell {
     
  background: lightyellow;
  padding: 5px 10px;
}
</style>

第二个页面接收数据

methods: {
     
  getPassValue() {
     
    let data = this.$route.params;
    console.log(JSON.stringify(data));
    console.log(data.passValue);
  }
},
created() {
     
  this.getPassValue();
}