vue路由跳转

1.需求分析

点击A页面的一个卡片，跳转到B页面的对应的tabItem项的页面。 A页面：

B页面：

2.源代码

A.vue

代码语言：javascript复制

//截取的是关键代码
//点击货架卡片的方法
 <div class="warehouse-card"
   @click.stop="enterIntoShelfManagement(item.houseName, item.houseSn)">
   <div class="img">
     <img
       src="../../../assets/imgs/goods.png"
       style="width: 60px;height: 60px;"
     />
   </div>
   <div class="title">{{ $t("lang.cargo") }}</div>
   <div class="subTitle">
     {{ item.goodsCount }}{{ $t("lang.type") }}
   </div>
 </div>

<script>
enterIntoShelfManagement(warehouseName, warehouseSn) {
      this.$router.push({
        path: "/warehouseList/manage",
        query: { warehouseName, warehouseSn,tabItem:'shielf'},
      });
    },
</script>

B.vue

代码语言：javascript复制

<template>
  <div class="container">
    <div class="container-header">
      <span @click="goBack">{{ $t("lang.warehouse") }}</span>
      <Icon
        link="icon-icon_page_next"
        customStyle="width:14px;height:14px;color:#999;"
      ></Icon>
      <span @click="goBackStock">{{ warehouseName }}</span>
    </div>
    <div class="container-body">
      <div class="warehouse-tab-header">
        <div
          :class="tabItem == 'stock' ? 'isActived' : ''"
          @click="clickTab('stock')"
        >
          {{ $t("lang.stockManage") }}
        </div>
        <span></span>
        <div
          :class="tabItem == 'shielf' ? 'isActived' : ''"
          @click="clickTab('shielf')"
        >
          {{ $t("lang.shielfManage") }}
        </div>
        <span></span>
        <div
          :class="tabItem == 'device' ? 'isActived' : ''"
          @click="clickTab('device')"
        >
          {{ $t("lang.deviceManage") }}
        </div>
      </div>
      <div class="warehouse-tab-content">
        <StockManage
          v-if="tabItem == 'stock'"
          :warehouseSn="warehouseSn"
        ></StockManage>
        <ShelfManage
          v-if="tabItem == 'shielf'"
          :warehouseSn="warehouseSn"
        ></ShelfManage>
        <DeviceManage
          v-if="tabItem == 'device'"
          :warehouseSn="warehouseSn"
        ></DeviceManage>
      </div>
    </div>
  </div>
</template>

<script>
import StockManage from "./stockManage/stockManage.vue";
import ShelfManage from "./shelfManage/shelfManage.vue";
import DeviceManage from "./deviceManage/deviceManage.vue";
// import { threadId } from "worker_threads";

export default {
  components: {
    StockManage,
    ShelfManage,
    DeviceManage
  },
  data() {
    return {
      // tabItem: "stock",
      tabItem: "",
      warehouseSn: "",
      warehouseName: ""
    };
  },
  mounted(){
    console.log("tabItem",this.tabItem)
  },
  created() {
    if (this.$route.query.warehouseName) {
      this.warehouseName = this.$route.query.warehouseName;
    }
    if (this.$route.query.warehouseSn) {
      this.warehouseSn = this.$route.query.warehouseSn;
    }
      if (this.$route.query.tabItem) {
      this.tabItem = this.$route.query.tabItem;
    }

  },
  methods: {
    clickTab(param) {
      this.tabItem = param;
      //   Storage.sessionSet('tabItem', param)
    },
    goBack() {
      this.$router.push("/warehouseList");
    },
    goBackStock() {
      this.tabItem = "stock";
    }
  }
};
</script>

3.思路总结

其实点击不同卡片跳转到同一页面的不同tabItem项下面的页面，其实就是多带一个tabItem参数。 就是这么简单！

route 路由 需求分析 class click

0 人点赞