配置路由守卫导航重定向

zuozhengqing

2023-12-13 fe87d39adb4e995ccf96a45b142ae026c3cf5eae

 src/components/layout/components/appsidebar/index.vue

@@ -3,7 +3,7 @@
  <div class="app-sidebar">
    <div class="box">
      <div class="logo-view">
        <el-image :src="require('@/assets/logo.png')"></el-image>
        <!-- <el-image :src="require('@/assets/logo.png')"></el-image> -->
      </div>
      <el-menu
        router
@@ -16,40 +16,13 @@
        text-color="#bfcbd9"
        active-text-color="#fff"
      >
        <el-menu-item index="/overview">
          <template slot="title">
            <i class="el-icon-bank-card icon"></i>
            <span>概述</span>
          </template>
          <!-- <el-menu-item index="/supplierManage/supplier">供应商</el-menu-item> -->
        </el-menu-item>
        <el-submenu index="2">

        <el-submenu  v-for="item in menus" :key="item.id" :index="item.id.toString()">
          <template slot="title">
            <i class="el-icon-s-grid icon"></i>
            <span>产品</span>
            <span>{{ item.title }}</span>
          </template>
          <el-menu-item index="/productManage/product">产品</el-menu-item>
          <el-menu-item index="/purchaseManage/quality">产品类别</el-menu-item>
        </el-submenu>
        <el-submenu index="3">
          <template slot="title">
            <i class="el-icon-setting icon"></i>
            <span>操作</span>
          </template>
          <el-menu-item index="/productManage/product">补货</el-menu-item>
          <el-menu-item index="/productManage/product">库存调整</el-menu-item>
          <el-menu-item index="/productManage/product">调拨</el-menu-item>
          <el-menu-item index="/productManage/product">报废</el-menu-item>
        </el-submenu>
        <el-submenu index="4">
          <template slot="title">
            <i class="el-icon-box icon"></i>
            <span>仓库管理</span>
          </template>
          <el-menu-item index="/productManage/product">仓库</el-menu-item>
          <el-menu-item index="/productManage/product">位置</el-menu-item>
          <el-menu-item index="/productManage/product">业务类型</el-menu-item>
          <!-- <el-menu-item index="/productManage/product">上架规则</el-menu-item> -->
          <el-menu-item v-for="itm in item.children" :key="itm.id" :index="itm.path">{{ itm.title }}</el-menu-item>
        </el-submenu>
      </el-menu>
    </div>
@@ -57,23 +30,41 @@
</template>

<script>
import { getMenuTreeByRole } from "@/api/menus/index"
import { mapMutations } from "vuex"
export default {
  name: "AppSidebar",
  props: {},
  data() {
    return {}
    return {
      menus: []
    }
  },
  watch: {},
  created() {
    this.initNavMenu()
    this.getMenuTreeByRole()
  },
  computed: {
    // ...mapState(['menus']),
  },
  methods: {
    ...mapMutations(["setMenus"]),
    getMenuTreeByRole() {
      getMenuTreeByRole().then((res) => {
        res.data.list.map((item) => {
          if (item.systemType === 3) {
            this.menus = item.menus
          }
        })
      })
    },
    // 监听路由
    initNavMenu() {
      // console.log(this.$route.name)
    },
    handleOpen(index) {
      console.log(index)
      console.log(index, "menuIndex")
    },
    handleClose() {}
  }