routerBanner修改

src/App.vue

@@ -1,7 +1,7 @@
 <template>
   <div id="app">
     <HeaderBanner></HeaderBanner>
-    <Navigation :navTitle1='navTitle1' :navTitle2='navTitle2'></Navigation>
+    <Navigation :navTitle='navTitle'></Navigation>
     <div class="app_content">
       <div class="router">
         <LoginInfo
@@ -13,7 +13,10 @@
         />
       </div>
       <div class="router_view">
-        <router-view :isManufacturer="isManufacturer"></router-view>
+        <router-view
+          :isManufacturer="isManufacturer"
+          @change_nav="changeNav"
+        ></router-view>
       </div>
     </div>
     <FooterBanner/>
@@ -36,24 +39,23 @@ export default {
   },
   data() {
     return {
-      navTitle1: ' > 数据管理',
-      navTitle2: '',
-      isManufacturer: 'manufacturer', // distributor 经销商 manufacturer 厂商
+      navTitle: [
+        {
+          title: '数据管理',
+          url: '/uploadInfor'
+        }
+      ],
+      isManufacturer: 'distributor', // distributor 经销商 manufacturer 厂商
       userAccount: '',
       userToken:''
     }
   },
   methods: {
     // 点击路由，导航栏对应变化
-    changeNav: function(navTitle1, navTitle2){
-      this.navTitle1 = ' > ' + navTitle1;
-      if (navTitle2) {
-        this.navTitle2 = ' > ' + navTitle2;
-      } else {
-        this.navTitle2 = '';
-      }
+    changeNav: function(navTitle){
+      console.log(navTitle, 'ti')
+      this.navTitle = navTitle
     },
-
     getTokenRequest(){
       this.$http({
         method: 'post',

src/components/Navigation.vue

@@ -1,23 +1,28 @@
 <template>
   <div class="navigation">
-    <p>经销商社交媒体数据平台{{navTitle1}}{{navTitle2}}</p>
+    <p class="fixedTitle">经销商社交媒体数据平台</p>
+    <div v-for="(nav, index) in navTitle" :key="index">
+      <span>></span>
+      <p @click="changepage(nav.url)">{{nav.title}}</p>
+    </div>
   </div>
 </template>
 
 <script>
 export default {
   props: {
-    navTitle1: {
-      type: String,
-      default: ''
-    },
-    navTitle2: {
-      type: String,
-      default: ''
+    navTitle: {
+      type: Array,
+      default: () => {
+        return []
+      }
     }
   },
-  mounted() {
-    
+  methods: {
+    changepage: function(url) {
+      // this.$router.push({ path: url });
+      console.log(url);
+    }
   }
 };
 </script>
@@ -26,9 +31,27 @@ export default {
 .navigation {
   width: 1190px;
   height: 20px;
+  line-height: 20px;
   margin: 4px auto;
-  p {
+  display: flex;
+  .fixedTitle {
     font-size: 12px;
+    height: 20px;
+    line-height: 20px;
+  }
+  div{
+    display: flex;
+    span{
+      margin: 0 5px;
+    }
+    p{
+      font-size: 12px;
+      height: 20px;
+      line-height: 20px;
+      // &:hover{
+      //   cursor: pointer;
+      // }
+    }
   }
 }
 </style>

src/components/RouterBanner.vue

@@ -5,73 +5,49 @@
       v-for="(routerObj, index) in routerList"
       :key="index"
     >
-      <div
-        class="first_level"
-        v-if="routerObj.isShow === 'all' || routerObj.isShow === isManufacturer"
-        @click="showLink(index)"
-        :class="{ selectStyle: isShowLink[index] }"
-        @mouseenter="enterDiv(index)"
-        @mouseleave="leaveDiv(index)"
-      >
-        <!-- 模块下有子路由 -->
-        <div class="title" v-if="!routerObj.path">
-          <div
-            class="icon"
-            :style="{ backgroundImage: 'url(' + routerObj.img1 + ')' }"
-            v-if="!isShowLink[index] && isHover[index]"
-          ></div>
-          <div
-            class="icon"
-            :style="{ backgroundImage: 'url(' + routerObj.img2 + ')' }"
-            v-else
-          ></div>
-          <p>{{ routerObj.title }}</p>
-          <div class="switch">
-            <img src="../img/switch2.png" v-if="!isShowLink[index]" />
-            <img src="../img/switch1.png" v-else />
+      <div v-if="routerObj.role === isManufacturer">
+        <div
+          @click="showLink(index)"
+          :class="{ selectStyle: isShowLink[index] }"
+          @mouseenter="enterDiv(index)"
+          @mouseleave="leaveDiv(index)"
+        >
+          <div class="first_level" @click="getNavTitle(routerObj)">
+            <router-link :to="routerObj.path" tag="li" class="title">
+              <div
+                class="icon"
+                :style="{ backgroundImage: 'url(' + routerObj.img1 + ')' }"
+                v-if="!isShowLink[index] && isHover[index]"
+              ></div>
+              <div
+                class="icon"
+                :style="{ backgroundImage: 'url(' + routerObj.img2 + ')' }"
+                v-else
+              ></div>
+              <p>
+                {{ routerObj.title }}
+              </p>
+              <div class="switch">
+                <img src="../img/switch2.png" v-if="!isShowLink[index]" />
+                <img src="../img/switch1.png" v-else />
+              </div>
+            </router-link>
           </div>
         </div>
-        <!-- 模块下没有子路由 -->
-        <div v-else class="first_level">
-          <router-link :to="routerObj.path" tag="li" class="title">
-            <div
-              class="icon"
-              :style="{ backgroundImage: 'url(' + routerObj.img1 + ')' }"
-              v-if="!isShowLink[index] && isHover[index]"
-            ></div>
-            <div
-              class="icon"
-              :style="{ backgroundImage: 'url(' + routerObj.img2 + ')' }"
-              v-else
-            ></div>
-            <p @click="getNavTitle(routerObj.title, '')">
-              {{ routerObj.title }}
-            </p>
-            <div class="switch">
-              <img src="../img/switch2.png" v-if="!isShowLink[index]" />
-              <img src="../img/switch1.png" v-else />
-            </div>
-          </router-link>
-        </div>
-      </div>
-      <!-- 模块的子路由 -->
-      <div
-        v-if="routerObj.list.length"
-        class="second_level"
-        v-show="isShowLink[index]"
-      >
-        <div v-for="(list, index) in routerObj.list" :key="index">
-          <router-link
-            v-if="list.isShow === 'all' || list.isShow === isManufacturer"
-            :to="list.path"
-            tag="li"
-          
-              @click="getNavTitle(routerObj.title, list.title)"
+        <!-- 模块的子路由 -->
+        <div class="second_level" v-show="isShowLink[index]">
+          <div
+            v-for="(list, index) in routerObj.list"
+            :key="index"
+            @click="getNavTitle(routerObj, list)"
+          >
+            <router-link
+              :to="list.path"
+              tag="li"
               :class="{ blueColor: list.path === routerPath }"
-            >
-              - {{ list.title }}
-            
-          </router-link>
+              >- {{ list.title }}
+            </router-link>
+          </div>
         </div>
       </div>
     </div>
@@ -88,41 +64,45 @@ export default {
   },
   data() {
     return {
-      isShowLink: [true, false, false, false], // 四个大模块
-      isHover: [true, true, true, true],
+      isShowLink: [true, true, false, false, false], // 五个大模块
+      isHover: [true, true, true, true, true],
       routerList: [
         {
-          title: "数据管理",
-          path: "", // 空表示与子路由，非空是点击跳转的路由
+          title: "数据管理", // 厂商数据管理
+          path: "/uploadInfor", // 默认展示的路由
           img1: require("../img/edit-manage1.png"), // 没点击的背景图
           img2: require("../img/edit-manage2.png"), // 点击了的背景图
-          isShow: "all", // 厂商和经销商都有权限
+          role: "manufacturer", // 厂商和经销商都有权限
           list: [
             {
               title: "上传记录",
               path: "/uploadRecord",
-              isShow: "manufacturer", // 只有厂商有权限
             },
             {
               title: "链接上传", // 厂商的链接上传
               path: "/uploadLinks",
-              isShow: "manufacturer", // 厂商有权限
-            },
-           {
-              title: "资料下载",
-              path: "/inforList",
-              isShow: "distributor", // 只有经销商有权限
             },
             {
               title: "上传资料",
               path: "/uploadInfor",
-              isShow: "manufacturer", // 只有厂商有权限
+            },
+          ],
+        },
+        {
+          title: "数据管理", // 进销商数据管理
+          path: "/inforList", // 默认展示的路由
+          img1: require("../img/edit-manage1.png"), // 没点击的背景图
+          img2: require("../img/edit-manage2.png"), // 点击了的背景图
+          role: "distributor", // 厂商和经销商都有权限
+          list: [
+            {
+              title: "资料下载",
+              path: "/inforList",
             },
             {
               title: "传播反馈", // 经销商链接上传
               path: "/uploadLink",
-              isShow: "distributor", // 经销商有权限
-            }
+            },
           ],
         },
         {
@@ -131,7 +111,7 @@ export default {
           img1: require("../img/User-Settings1.png"),
           img2: require("../img/User-Settings2.png"),
           list: [],
-          isShow: "manufacturer", // 厂商有权限
+          role: "manufacturer", // 厂商有权限
         },
         {
           title: "账号管理",
@@ -139,7 +119,7 @@ export default {
           img1: require("../img/User-Settings1.png"),
           img2: require("../img/User-Settings2.png"),
           list: [],
-          isShow: "distributor", // 经销商有权限
+          role: "distributor", // 经销商有权限
         },
         {
           title: "参数设置",
@@ -147,7 +127,7 @@ export default {
           img1: require("../img/Setting1.png"),
           img2: require("../img/Setting2.png"),
           list: [],
-          isShow: "manufacturer", // 只有厂商有权限
+          role: "manufacturer", // 只有厂商有权限
         },
       ],
     };
@@ -158,14 +138,34 @@ export default {
     },
   },
   methods: {
-    getNavTitle: function (navTitle1, navTitle2) {
-      // 点击路由的时候，修改导航栏
-      this.$emit("change_nav", navTitle1, navTitle2);
+    getNavTitle: function (navTitle, list) {
+      // 点击路由的时候，修改导航栏、
+      if (list) {
+        const nav = [
+          {
+            title: navTitle.title,
+            url: navTitle.path,
+          },
+          {
+            title: list.title,
+            url: list.path,
+          },
+        ];
+        this.$emit("change_nav", nav);
+      } else {
+        const nav = [
+          {
+            title: navTitle.title,
+            url: navTitle.path,
+          },
+        ];
+        this.$emit("change_nav", nav);
+      }
     },
     // 展开、关闭router栏
     showLink: function (i) {
       let flag = this.isShowLink[i];
-      this.isShowLink = [false, false, false, false];
+      this.isShowLink = [false, false, false, false, false];
       this.isShowLink.splice(i, 1, !flag);
     },
     // 鼠标移入变白色背景
@@ -224,6 +224,7 @@ export default {
           img {
             width: 11px;
             height: 11px;
+            transform: translateY(-5px);
           }
         }
         p {
@@ -231,6 +232,13 @@ export default {
           margin-left: 9px;
         }
       }
+      li {
+        width: 100%;
+        height: 100%;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+      }
     }
     .second_level {
       li {
@@ -252,8 +260,8 @@ export default {
 /* .blueColor {
   color: #0056a0;
 } */
-.router-link-active{
-    color: #0056a0;
+.router-link-active {
+  color: #0056a0;
 }
 .selectStyle {
   background-color: rgb(0, 86, 160);

src/views/parameter/ParameterIndex.vue

@@ -6,13 +6,14 @@
         v-for="(tag, index) in tagslist"
         :key="index"
         :class="{ selected: '/parameterIndex/' + tag.path === childRouter }"
+        @click="getNavTitle('参数设置',tag.title)"
       >
         <router-link
           :to="'/parameterIndex/' + tag.path"
           tag="li"
           class="title"
-          >{{ tag.title }}</router-link
-        >
+          >{{ tag.title }}
+        </router-link>
       </div>
     </div>
     <div class="parameter_table">
@@ -37,10 +38,14 @@ export default {
     },
   },
   methods: {
+    getNavTitle: function (navTitle1, navTitle2) {
+      // 点击路由的时候，修改导航栏
+      // this.$emit("change_nav", navTitle1, navTitle2);
+      console.log(navTitle1, navTitle2);
+    },
   },
   mounted() {},
-  created() {
-  },
+  created() {},
 };
 </script>