面包屑

src/App.vue

@@ -46,7 +46,7 @@ export default {
           url: '/uploadInfor'
         }
       ],
-      isManufacturer: 'distributor', // distributor 经销商 manufacturer 厂商
+      isManufacturer: 'manufacturer', // distributor 经销商 manufacturer 厂商
       userAccount: '',
       userToken:''
     }
@@ -54,7 +54,6 @@ export default {
   methods: {
     // 点击路由，导航栏对应变化
     changeNav: function(navTitle){
-      console.log(navTitle, 'ti')
       this.navTitle = navTitle
     },
     getTokenRequest(){

src/components/Navigation.vue

@@ -1,9 +1,11 @@
 <template>
   <div class="navigation">
     <p class="fixedTitle">经销商社交媒体数据平台</p>
-    <div v-for="(nav, index) in navTitle" :key="index">
-      <span>></span>
-      <p @click="changepage(nav.url)">{{nav.title}}</p>
+    <div v-for="(meta, index) in $route.meta" :key="index">
+      <div v-if="meta.url">
+        <router-link :to="meta.url" @click="aaaaa(meta.url)" tag="li"><span>></span>{{meta.name}}</router-link>
+      </div>
+      <div v-else><span>></span>{{meta.name}}</div>
     </div>
   </div>
 </template>
@@ -22,7 +24,10 @@ export default {
     changepage: function(url) {
       // this.$router.push({ path: url });
       console.log(url);
-    }
+    },
+  },
+  mounted() {
+    console.log(this.$route, 222)
   }
 };
 </script>
@@ -41,17 +46,12 @@ export default {
   }
   div{
     display: flex;
+    font-size: 12px;
+    height: 20px;
+    line-height: 20px;
     span{
       margin: 0 5px;
     }
-    p{
-      font-size: 12px;
-      height: 20px;
-      line-height: 20px;
-      // &:hover{
-      //   cursor: pointer;
-      // }
-    }
   }
 }
 </style>

src/components/RouterBanner.vue

@@ -5,8 +5,8 @@
       v-for="(routerObj, index) in routerList"
       :key="index"
     >
-      <div v-if="routerObj.role === isManufacturer">
-        <!-- <div> -->
+      <!-- <div v-if="routerObj.role === isManufacturer"> -->
+        <div>
         <div
           :class="{ selectStyle: routerObj.path === routerPath }"
           @mouseenter="enterDiv(index)"
@@ -72,18 +72,14 @@ export default {
   },
   computed: {
     routerPath: function () {
-      return this.$route.matched[0].path;
+      return this.$route.matched[0]&&this.$route.matched[0].path;
     },
   },
-  watch: {
-    // routerPath: function(newpath, oldPath) {
-    //   this.firstRouter = 
-    //   console.log(this.$route.matched[0].path)
-    //   console.log(newpath, 'new');
-    //   console.log(oldPath);
-      // console.log()
-    // }
-  },
+  // watch: {
+  //   routerPath: function(newpath) {
+  //     console.log(newpath, 'new');
+  //   }
+  // },
   methods: {
     enterDiv: function (i) {
       this.isHover.splice(i, 1, false);

src/config/router.js

@@ -57,7 +57,7 @@ const ROUTER = [
     },
     {
         title: "参数设置",
-        path: "/parameterIndex/carSeries",
+        path: "/parameterIndex",
         img1: require("../img/Setting1.png"),
         img2: require("../img/Setting2.png"),
         list: [],

src/router/index.js

@@ -2,6 +2,7 @@ import Vue from 'vue'
 import VueRouter from 'vue-router'
 // 上传记录
 import UploadRecord from '../views/data/UploadRecord.vue'
+import UploadRecordDetail from '../views/data/components/UploadRecordDetail'
 // 厂商链接上传
 import UploadLinks from '../views/data/UploadLinks.vue'
 // 经销商链接上传
@@ -22,6 +23,8 @@ import AccountManage from '../views/account/AccountManage.vue'
 import ParameterIndex from '../views/parameter/ParameterIndex.vue'
 // 车系车型
 import CarSeries from '../views/parameter/CarSeries'
+// 系列车型
+import CarType from '../views/parameter/components/Carseries/CarType'
 // 平台模块
 import PlatformModule from '../views/parameter/PlatformModule'
 //内容分类1
@@ -39,54 +42,184 @@ import CommonParam from '../views/parameter/CommonParam'
 
 Vue.use(VueRouter)
 
-const routes = [{
+const routes = [
+    {
         path: '/',
         component: InforList,
         redirect: '/inforList'
     },
     {
         path: '/uploadRecord',
-        component: UploadRecord
+        component: UploadRecord,
+        meta: [
+            {
+                name: "数据管理",
+                url: ''
+            },
+            {
+                name: "上传记录",
+                url: '/uploadRecord'
+            }
+        ],
+        children: [
+            {
+                path: 'detail',
+                component: UploadRecordDetail,
+                meta: [
+                    {
+                        name: "数据管理",
+                        url: ''
+                    },
+                    {
+                        name: "上传记录",
+                        url: '/uploadRecord'
+                    },
+                    {
+                        name: "内容详情",
+                        url: ''
+                    }
+                ],
+            }
+        ]
     },
     {
         path: '/uploadLink',
         component: UploadLink,
-        children: [{
-            path: '/uploadLink/sonUploadLink',
-            component: sonUploadLink,
-        }]
+        meta: [
+            {
+                name: "传播项目",
+                url: ''
+            },
+            {
+                name: "传播反馈",
+                url: "/uploadLink"
+            }
+        ],
+        children: [
+            {
+                path: '/uploadLink/sonUploadLink',
+                component: sonUploadLink,
+                meta: [
+                    {
+                        name: "传播项目",
+                        url: ''
+                    },
+                    {
+                        name: "传播反馈",
+                        url: "/uploadLink"
+                    },
+                    {
+                        name: "详情",
+                        url: "/uploadLink/sonUploadLink" 
+                    }
+                ],
+            }
+        ]
     },
     {
         path: '/uploadLinks',
-        component: UploadLinks
+        component: UploadLinks,
+        meta: [
+            {
+                name: "数据管理",
+                url: ''
+            },
+            {
+                name: "链接上传",
+                url: '/uploadLinks'
+            }
+        ],
     },
     {
         path: '/uploadInfor',
-        component: UploadInfor
+        component: UploadInfor,
+        meta: [
+            {
+                name: "数据管理",
+                url: ''
+            },
+            {
+                name: "上传资料",
+                url: '/uploadInfor'
+            }
+        ],
     },
     {
         path: '/inforList',
-        component: InforList
+        component: InforList,
+        meta: [
+            {
+                name: "传播项目",
+                url: ''
+            },
+            {
+                name: "资料下载",
+                url: "/inforList"
+            }
+        ],
     },
     {
         path: '/accountIndex',
-        component: AccountIndex
+        component: AccountIndex,
+        meta: [
+            {
+                name: "账号管理",
+                url: '/accountIndex'
+            }
+        ],
     },
     {
         path: '/accountManage',
-        component: AccountManage
+        component: AccountManage,
+        meta: [
+            {
+                name: "账号管理",
+                url: '/accountManage'
+            }
+        ],
     },
     {
         path: '/parameterIndex',
         component: ParameterIndex,
-        children: [{
+        children: [
+            {
                 path: '',
                 component: CarSeries,
                 redirect: 'carSeries'
             },
             {
                 path: 'carSeries',
-                component: CarSeries
+                component: CarSeries,
+                meta: [
+                    {
+                        name: "参数设置",
+                        url: ''
+                    },
+                    {
+                        name: "车系车型",
+                        url: '/parameterIndex/carSeries'
+                    }
+                ],
+                children: [
+                    {
+                        path: 'carType',
+                        component: CarType,
+                        meta: [
+                            {
+                                name: "参数设置",
+                                url: ''
+                            },
+                            {
+                                name: "车系车型",
+                                url: '/parameterIndex/carSeries'
+                            },
+                            {
+                                name: "车型管理",
+                                url: ''
+                            }
+                        ]
+                    }
+                ]
             },
             {
                 path: 'platformModule',

src/views/data/UploadRecord.vue

@@ -150,6 +150,7 @@ export default {
     },
     detail: function (i) {
       this.$router.push({
+        path: '/UploadRecord/detail',
         query: {
           tag: "detail",
           id: i,

src/views/parameter/CarSeries.vue

@@ -126,7 +126,8 @@ export default {
     carType: function (index) {
       // 页面变化
       this.$router.push({
-        query: { tag: "vehicle_type", id: this.tableData[index]["id"] },
+        path: '/parameterIndex/carSeries/carType',
+        query: { tag: "vehicle_type", id: this.tableData[index]["id"], series: this.tableData[index]["typeName"] },
       });
     },
     // 新增车系  接口

src/views/parameter/components/Carseries/CarType.vue

@@ -53,6 +53,7 @@ export default {
       tableData: [],
       modalFlag: false, // 控制模态框展示
       parentId: (this.$route.query && this.$route.query.id) || "",
+      series: (this.$route.query && this.$route.query.series) || "",
     };
   },
   computed: {
@@ -216,6 +217,12 @@ export default {
     this.getData(this.currentPage, this.pageSize);
     console.log(this.parentId);
   },
+  beforeRouteEnter(to, from, next) {
+    console.log(from)
+    let meta = to.meta;
+    meta[2].name = to.query.series + '车型管理'
+    next()
+  }
 };
 </script>