love-nav-vue/src/components/myNav/MyNav.vue

<template>
  <div class="wrapper" v-loading="loading"
       element-loading-text="拼命加载中"
       element-loading-spinner="el-icon-loading"
       element-loading-background="var(--theme-bg-color)">
    <LeftSide :category="category"></LeftSide>
    <div class="main-container">
      <div class="content-wrapper">
        <div v-for="(item,index) in userNavList" :key="index" class="content-section">
          <div :id="item.name" class="HeadLine" style="margin-top:15px;margin-left:-5px;">
            <div class="HeadSquare"></div>
            <div class="TitleFont" style="color:var(--theme-color)"><i class="el-icon-s-unfold"></i>{{item.name}}</div>
          </div>
          <div class="apps-card" >
            <NavList style="border-color:var(--border-color);border-width: 3px;"  :v-if="item.childUC" v-for="(item,index2) in item.childUC" :key="index2" :nav="item"></NavList>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import $ from 'jquery'
import NavList from "@/components/home/NavList.vue";
import axios from "axios";
import Vue from "vue";
import LeftSide from "@/components/home/LeftSide.vue";

export default {
  name: "MyNav",
  components: {
    LeftSide,
    NavList
    // MainHeader
  },
  data() {
    return {
      userNavList: [],
      category: [],
      loading:true,
    }
  },
  // 监听,当路由发生变化的时候执行
  watch: {
    '$route': 'getPath'
  },
  mounted() {
    this.Fun1();
    this.Fun2();
    this.Fun3();
    this.Fun4();
    this.dropdownFun();
    this.getUserNav();
    this.getCategoriesByUser();
  },
  created() {

  },
  computed: {},
  methods: {
    getCategoriesByUser(){
      let _this = this;
      if(localStorage.getItem('userId')&&localStorage.getItem('Authorization')){
        axios({
          method: 'post',
          url: '/api/UrlAndCate/disposeBookmarkToJsonByUserId',
          params:{
            userId:localStorage.getItem('userId')
          }
        }).then(function (res) {

            _this.category = res.data.data;


        }).catch((error) => {
          // Vue.prototype.$notify.error({
          //   title: '错误',
          //   message: error,
          //   offset: 0
          // });
        })
      }else {
        Vue.prototype.$notify.error({
          title: '错误',
          message: "登录信息失效，请重新登录",
          offset: 0
        });
      }

    },

    getPath() {
      if(this.$route.query.name){
        document.querySelector(this.$route.query.name).scrollIntoView(true)
      }else{
        return false;
      }
    },

    getUserNav() {
      let _this = this;
      if (localStorage.getItem("userId")&&localStorage.getItem('Authorization')) {
        axios({
          method: 'post',
          url: '/api/UrlAndCate/disposeBookmarkToJson',
          params: {
            userId: localStorage.getItem("userId"),
          }
        }).then(function (res) {
          // console.log(res);
            _this.userNavList = res.data;
            _this.loading=false;

        }).catch((error) => {
          // Vue.prototype.$notify.error({
          //   title: '错误',
          //   message: error === null ? '' : error,
          //   offset: 0
          // });
        })
      } else {
        Vue.prototype.$notify.error({
          title: '错误',
          message: "请先登录！",
          offset: 0
        });
      }

    },


    Fun1() {
      $(document).click(function (e) {
        var container = $(".status-button");
        var dd = $(".dropdown");
        if (!container.is(e.target) && container.has(e.target).length === 0) {
          dd.removeClass("is-active");
        }
      });
    },
    Fun2() {
      $(".status-button:not(.open)").on("click", function () {
        $(".overlay-app").addClass("is-active");
      });
      $(".pop-up .close").click(function () {
        $(".overlay-app").removeClass("is-active");
      });
    },
    Fun3() {
      $(".status-button:not(.open)").click(function () {
        $(".pop-up").addClass("visible");
      });
    },
    Fun4() {
      $(".pop-up .close").click(function () {
        $(".pop-up").removeClass("visible");
      });
    },
    dropdownFun() {
      const dropdowns = document.querySelectorAll(".dropdown");
      dropdowns.forEach(dropdown => {
        dropdown.addEventListener("click", e => {
          e.stopPropagation();
          dropdowns.forEach(c => c.classList.remove("is-active"));
          dropdown.classList.add("is-active");
        });
      });
    },
  }

}
</script>