路由修改&&导航栏展示

src/App.vue

@@ -8,15 +8,16 @@
         :userAccount='userAccount'
         ></LoginInfo>
         <Routerbanner
-          @change_nav="changeNav"
           :isManufacturer="isManufacturer"
         />
       </div>
       <div class="router_view">
-        <router-view
-          :isManufacturer="isManufacturer"
-          @change_nav="changeNav"
-        ></router-view>
+        <keep-alive>
+          <router-view
+            :isManufacturer="isManufacturer"
+            @change_nav="changeNav"
+          ></router-view>
+        </keep-alive>
       </div>
     </div>
     <FooterBanner/>
@@ -45,7 +46,7 @@ export default {
           url: '/uploadInfor'
         }
       ],
-      isManufacturer: 'distributor', // distributor 经销商 manufacturer 厂商
+      isManufacturer: 'manufacturer', // distributor 经销商 manufacturer 厂商
       userAccount: '',
       userToken:''
     }

src/components/RouterBanner.vue

@@ -6,18 +6,18 @@
       :key="index"
     >
       <div v-if="routerObj.role === isManufacturer">
+        <!-- <div> -->
         <div
-          @click="showLink(index)"
-          :class="{ selectStyle: isShowLink[index] }"
+          :class="{ selectStyle: routerObj.path === routerPath }"
           @mouseenter="enterDiv(index)"
           @mouseleave="leaveDiv(index)"
         >
-          <div class="first_level" @click="getNavTitle(routerObj)">
+          <div 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]"
+                v-if="routerObj.path !== routerPath && isHover[index]"
               ></div>
               <div
                 class="icon"
@@ -28,18 +28,17 @@
                 {{ routerObj.title }}
               </p>
               <div class="switch">
-                <img src="../img/switch2.png" v-if="!isShowLink[index]" />
+                <img src="../img/switch2.png" v-if="routerObj.path !== routerPath" />
                 <img src="../img/switch1.png" v-else />
               </div>
             </router-link>
           </div>
         </div>
         <!-- 模块的子路由 -->
-        <div class="second_level" v-show="isShowLink[index]">
+        <div class="second_level" v-show="(routerObj.pathList || []).indexOf(routerPath) > -1">
           <div
             v-for="(list, index) in routerObj.list"
             :key="index"
-            @click="getNavTitle(routerObj, list)"
           >
             <router-link
               :to="list.path"
@@ -55,6 +54,7 @@
 </template>
 
 <script>
+import { ROUTER } from '../config/router';
 export default {
   props: {
     isManufacturer: {
@@ -64,72 +64,8 @@ export default {
   },
   data() {
     return {
-      isShowLink: [true, true, false, false, false], // 五个大模块
       isHover: [true, true, true, true, true],
-      routerList: [
-        {
-          title: "数据管理", // 厂商数据管理
-          path: "/uploadInfor", // 默认展示的路由
-          img1: require("../img/edit-manage1.png"), // 没点击的背景图
-          img2: require("../img/edit-manage2.png"), // 点击了的背景图
-          role: "manufacturer", // 厂商和经销商都有权限
-          list: [
-            {
-              title: "上传记录",
-              path: "/uploadRecord",
-            },
-            {
-              title: "链接上传", // 厂商的链接上传
-              path: "/uploadLinks",
-            },
-            {
-              title: "上传资料",
-              path: "/uploadInfor",
-            },
-          ],
-        },
-        {
-          title: "数据管理", // 进销商数据管理
-          path: "/inforList", // 默认展示的路由
-          img1: require("../img/edit-manage1.png"), // 没点击的背景图
-          img2: require("../img/edit-manage2.png"), // 点击了的背景图
-          role: "distributor", // 厂商和经销商都有权限
-          list: [
-            {
-              title: "资料下载",
-              path: "/inforList",
-            },
-            {
-              title: "传播反馈", // 经销商链接上传
-              path: "/uploadLink",
-            },
-          ],
-        },
-        {
-          title: "账号管理", // 厂商的账号管理
-          path: "/accountIndex",
-          img1: require("../img/User-Settings1.png"),
-          img2: require("../img/User-Settings2.png"),
-          list: [],
-          role: "manufacturer", // 厂商有权限
-        },
-        {
-          title: "账号管理",
-          path: "/accountManage",
-          img1: require("../img/User-Settings1.png"),
-          img2: require("../img/User-Settings2.png"),
-          list: [],
-          role: "distributor", // 经销商有权限
-        },
-        {
-          title: "参数设置",
-          path: "/parameterIndex",
-          img1: require("../img/Setting1.png"),
-          img2: require("../img/Setting2.png"),
-          list: [],
-          role: "manufacturer", // 只有厂商有权限
-        },
-      ],
+      routerList: ROUTER
     };
   },
   computed: {
@@ -137,38 +73,14 @@ export default {
       return this.$route.path;
     },
   },
+  // watch: {
+  //   routerPath: function(newpath, oldPath) {
+  //     console.log(newpath, 'new');
+  //     console.log(oldPath);
+  //     console.log()
+  //   }
+  // },
   methods: {
-    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, false];
-      this.isShowLink.splice(i, 1, !flag);
-    },
-    // 鼠标移入变白色背景
     enterDiv: function (i) {
       this.isHover.splice(i, 1, false);
     },
@@ -246,11 +158,9 @@ export default {
         height: 38px;
         line-height: 38px;
         text-align: center;
-        p {
-          &:hover {
-            cursor: pointer;
-            color: rgb(0, 86, 160);
-          }
+        &:hover {
+          cursor: pointer;
+          color: rgb(0, 86, 160);
         }
       }
     }

src/config/router.js

@@ -0,0 +1,113 @@
+const ROUTER = [
+    {
+        title: "数据管理", // 厂商数据管理
+        path: "/uploadRecord", // 点击数据管理展示的路由
+        img1: require("../img/edit-manage1.png"), // 没点击的背景图
+        img2: require("../img/edit-manage2.png"), // 点击了的背景图
+        role: "manufacturer", // 厂商权限
+        list: [
+            {
+                title: "上传记录",
+                path: "/uploadRecord",
+            },
+            {
+                title: "链接上传", // 厂商的链接上传
+                path: "/uploadLinks",
+            },
+            {
+                title: "上传资料",
+                path: "/uploadInfor",
+            },
+        ],
+        pathList: ['/uploadRecord', '/uploadLinks', '/uploadInfor'] // 方便判断是否展开
+    },
+    {
+        title: "数据管理", // 进销商数据管理
+        path: "/inforList", // 点击数据管理展示的路由
+        img1: require("../img/edit-manage1.png"), // 没点击的背景图
+        img2: require("../img/edit-manage2.png"), // 点击了的背景图
+        role: "distributor", // 厂商和经销商都有权限
+        list: [
+            {
+                title: "资料下载",
+                path: "/inforList",
+            },
+            {
+                title: "传播反馈", // 经销商链接上传
+                path: "/uploadLink",
+            },
+        ],
+        pathList: ['/inforList', '/uploadLink']
+    },
+    {
+        title: "账号管理", // 厂商的账号管理
+        path: "/accountIndex",
+        img1: require("../img/User-Settings1.png"),
+        img2: require("../img/User-Settings2.png"),
+        list: [],
+        role: "manufacturer", // 厂商有权限
+    },
+    {
+        title: "账号管理",
+        path: "/accountManage",
+        img1: require("../img/User-Settings1.png"),
+        img2: require("../img/User-Settings2.png"),
+        list: [],
+        role: "distributor", // 经销商有权限
+    },
+    {
+        title: "参数设置",
+        path: "/parameterIndex/carSeries",
+        img1: require("../img/Setting1.png"),
+        img2: require("../img/Setting2.png"),
+        list: [],
+        role: "manufacturer", // 厂商有权限
+    },
+];
+const TAG = [
+    {
+        num: 1,
+        title: '车系车型',
+        path: '/carSeries'
+    },
+    {
+        num: 2,
+        title: '平台版块',
+        path: '/platformModule'
+    },
+    {
+        num: 3,
+        title: '稿件类别',
+        path: '/contentCategory1'
+    },
+    {
+        num: 4,
+        title: '内容分类',
+        path: '/contentCategory2'
+    },
+    {
+        num: 5,
+        title: '媒体平台',
+        path: '/mediaPlatform'
+    },
+    {
+        num: 6,
+        title: '权限分组',
+        path: '/grouping'
+    }
+    // {
+    //     num: 7,
+    //     title: '链接上传',
+    //     path: 'linkUpload'
+    // },
+    // {
+    //     num: 8,
+    //     title: '常用参数',
+    //     path: 'commonParam'
+    // }
+]
+
+module.exports = {
+    ROUTER,
+    TAG
+}

src/views/account/AccountIndex.vue

@@ -332,6 +332,15 @@ export default {
     };
     this.getDealerListRequest(req);
   },
+  activated() {
+    const nav = [
+      {
+        title: '账号管理',
+        url: ''
+      }
+    ]
+    this.$emit('change_nav', nav)
+  }
 };
 </script>
 

src/views/data/UploadInfor.vue

@@ -587,6 +587,19 @@ export default {
     this.getAreaList();
   },
   beforeCreate() {},
+  activated() {
+    const nav = [
+      {
+        title: '数据管理',
+        url: ''
+      },
+      {
+        title: '上传资料',
+        url: ''
+      }
+    ]
+    this.$emit('change_nav', nav)
+  }
 };
 </script>
 

src/views/data/UploadLinks.vue

@@ -187,6 +187,19 @@ export default {
     this.firmsLinkUpload(req);
     this.getAreaList();
   },
+  activated() {
+    const nav = [
+      {
+        title: '数据管理',
+        url: ''
+      },
+      {
+        title: '链接上传',
+        url: ''
+      }
+    ]
+    this.$emit('change_nav', nav)
+  }
 };
 </script>
 

src/views/data/UploadRecord.vue

@@ -222,6 +222,19 @@ export default {
     };
     this.getFirmsUploadList(res);
   },
+  activated() {
+    const nav = [
+      {
+        title: '数据管理',
+        url: ''
+      },
+      {
+        title: '上传记录',
+        url: ''
+      }
+    ]
+    this.$emit('change_nav', nav)
+  }
 };
 </script>
 

src/views/data/components/UploadRecordDetail.vue

@@ -297,7 +297,7 @@ export default {
       let url = this.onlineUrl + "/dealerDownload?" + reqStr;
       window.open(url);
     },
-  },
+  }
 };
 </script>
 
@@ -305,13 +305,16 @@ export default {
 .record_detail {
   .title {
     border-top: 1px solid #ccc;
+    border-left: 1px solid #ccc;
+    border-right: 1px solid #ccc;
     .data_detail {
       padding-left: 10px;
       font-size: 14px;
       font-weight: bolder;
       height: 30.8px;
-      vertical-align: bottom;
-      display: table-cell;
+      line-height: 30.8px;
+      // vertical-align: bottom;
+      // display: table-cell;
     }
   }
   .content {

src/views/parameter/ParameterIndex.vue

@@ -5,11 +5,10 @@
         class="tag"
         v-for="(tag, index) in tagslist"
         :key="index"
-        :class="{ selected: '/parameterIndex/' + tag.path === childRouter }"
-        @click="getNavTitle('参数设置',tag.title)"
+        :class="{ selected: '/parameterIndex' + tag.path === childRouter }"
       >
         <router-link
-          :to="'/parameterIndex/' + tag.path"
+          :to="'/parameterIndex' + tag.path"
           tag="li"
           class="title"
           >{{ tag.title }}
@@ -17,13 +16,16 @@
       </div>
     </div>
     <div class="parameter_table">
-      <router-view />
+      <keep-alive>
+        <router-view @change_nav="changNav"/>
+      </keep-alive>
     </div>
   </div>
 </template>
 
 <script>
-import { TAG } from "./routerConfig";
+import { TAG } from "../../config/router";
+// import { ROUTER } from "../../config//router"
 export default {
   components: {},
   data() {
@@ -38,11 +40,10 @@ export default {
     },
   },
   methods: {
-    getNavTitle: function (navTitle1, navTitle2) {
-      // 点击路由的时候，修改导航栏
-      // this.$emit("change_nav", navTitle1, navTitle2);
-      console.log(navTitle1, navTitle2);
-    },
+    changNav: function(nav) {
+      console.log(nav);
+      this.$emit('change_nav', nav)
+    }
   },
   mounted() {},
   created() {},

src/views/parameter/routerConfig.js

@@ -2,32 +2,32 @@ const TAG = [
     {
         num: 1,
         title: '车系车型',
-        path: 'carSeries'
+        path: '/carSeries'
     },
     {
         num: 2,
         title: '平台版块',
-        path: 'platformModule'
+        path: '/platformModule'
     },
     {
         num: 3,
         title: '稿件类别',
-        path: 'contentCategory1'
+        path: '/contentCategory1'
     },
     {
         num: 4,
         title: '内容分类',
-        path: 'contentCategory2'
+        path: '/contentCategory2'
     },
     {
         num: 5,
         title: '媒体平台',
-        path: 'mediaPlatform'
+        path: '/mediaPlatform'
     },
     {
         num: 6,
         title: '权限分组',
-        path: 'grouping'
+        path: '/grouping'
     }
     // {
     //     num: 7,