更新

src/router/index.js

@@ -48,7 +48,12 @@ const routes = [
 ];
 
 const router = new VueRouter({
+  mode: 'history',
+  base: process.env.NODE_ENV === 'development' ? '' : process.env.VUE_APP_ROUTER,
   routes,
 });
+// const router = new VueRouter({
+//   routes,
+// });
 
 export default router;

src/views/news/listDetail.vue

@@ -29,18 +29,12 @@
               </el-col>
             </el-col>
             <el-col :span="18" class="right">
-              <el-col :span="24" class="top">
-                <span></span>
-                <span>{{ columnName }}</span>
-              </el-col>
-              <el-col :span="24" class="list">
-                <span v-if="display == '0'">
-                  列表
-                </span>
-                <span v-else-if="display == '1'">
-                  详情
-                </span>
-              </el-col>
+              <span v-if="displays == '0'">
+                <el-col :span="24" v-for="(item, index) in list" :key="index">
+                  <p @click="detailBtn(item.title)">{{ item.title }}</p>
+                </el-col>
+              </span>
+              <span v-else>详情</span>
             </el-col>
           </div>
         </el-col>
@@ -67,33 +61,59 @@ export default {
       menuColor: 'rgb(254, 149, 14)',
       menuIndex: '0',
       columnName: '',
-      display: '0',
+      displays: '0',
+      list: [
+        {
+          title: '列表',
+        },
+      ],
     };
   },
   created() {
-    this.searchInfo();
+    this.changeColumn();
   },
   methods: {
-    searchInfo() {
-      if (this.col_name == '科技资讯') this.changeMenu(this.$route.query.col_name, 0);
-      if (this.col_name == '技术前沿') this.changeMenu(this.$route.query.col_name, 1);
-      if (this.col_name == '工作动态') this.changeMenu(this.$route.query.col_name, 2);
-      if (this.col_name == '通知通告') this.changeMenu(this.$route.query.col_name, 3);
+    // 选择栏目
+    changeColumn() {
+      if (this.col_name == '科技资讯') {
+        this.menuIndex = 0;
+        this.columnName = this.col_name;
+        this.menuColor = 'rgb(254, 149, 14)';
+        this.$set(this, `displays`, this.display);
+      } else if (this.col_name == '技术前沿') {
+        this.menuIndex = 1;
+        this.columnName = this.col_name;
+        this.menuColor = 'rgb(254, 149, 14)';
+        this.$set(this, `displays`, this.display);
+      } else if (this.col_name == '工作动态') {
+        this.menuIndex = 2;
+        this.columnName = this.col_name;
+        this.menuColor = 'rgb(254, 149, 14)';
+        this.$set(this, `displays`, this.display);
+      } else if (this.col_name == '通知通告') {
+        this.menuIndex = 3;
+        this.columnName = this.col_name;
+        this.menuColor = 'rgb(254, 149, 14)';
+        this.$set(this, `displays`, this.display);
+      }
     },
+    // 选择菜单
     changeMenu(name, index) {
       this.menuIndex = index;
       this.columnName = name;
       this.menuColor = 'rgb(254, 149, 14)';
+      this.$set(this, `displays`, 0);
+    },
+    // 点击详情
+    detailBtn(title) {
+      this.$set(this, `displays`, 1);
     },
   },
   computed: {
     ...mapState(['user']),
-    dispaly() {
+    display() {
       return this.$route.query.display;
     },
-    pageTitle() {
-      return `${this.$route.meta.title}`;
-    },
     col_name() {
       return this.$route.query.col_name;
     },