大盘路由切换

src/views/bigScreen/components/bigScreenBtn/index.vue

@@ -1,23 +1,26 @@
 
 
 <template>
-  <div class="bigScreenBtn" :class="{selected:selected}">
-    <div>{{title}}</div>
-  </div>
+  <router-link :to="routerUrl">
+    <div class="bigScreenBtn" :class="{selected:this.$route.path == routerUrl}">
+      <div>{{title}}</div>
+    </div>
+  </router-link>
+
 </template>
 
 <script>
 export default {
   name: 'BigScreenBtn',
   props: {
+    routerUrl: {
+      type: String,
+      default: '',
+    },
     title: {
       type: String,
       default: '按钮',
     },
-    selected: {
-      type: Boolean,
-      default: false,
-    },
   },
   data () {
     return {
@@ -44,7 +47,7 @@ export default {
   background-image: url(./default.png);
 }
 .bigScreenBtn:hover {
-    opacity: .8;
+  opacity: 0.8;
 }
 
 .bigScreenBtn.selected {

src/views/bigScreen/components/bigScreenHead/index.vue

@@ -7,13 +7,13 @@
       <el-col :span="8">
         <el-row style="padding: 0px 20px">
           <el-col :span="8">
-            <bigScreenBtn title="驾驶舱总览" :selected="true"></bigScreenBtn>
+            <bigScreenBtn title="驾驶舱总览" routerUrl="/bigScreen/drivingCabin"></bigScreenBtn>
           </el-col>
           <el-col :span="8">
-            <bigScreenBtn title="科研生产" :selected="false"></bigScreenBtn>
+            <bigScreenBtn title="科研生产" routerUrl="/bigScreen/scientific"></bigScreenBtn>
           </el-col>
           <el-col :span="8">
-            <bigScreenBtn title="经营管理" :selected="false"></bigScreenBtn>
+            <bigScreenBtn title="经营管理"></bigScreenBtn>
           </el-col>
         </el-row>
       </el-col>
@@ -22,13 +22,13 @@
       <el-col :span="8">
         <el-row style="padding: 0px 0 0 60px">
           <el-col :span="8">
-            <bigScreenBtn title="质量管理" :selected="false"></bigScreenBtn>
+            <bigScreenBtn title="质量管理"></bigScreenBtn>
           </el-col>
           <el-col :span="8">
-            <bigScreenBtn title="安全管理" :selected="false"></bigScreenBtn>
+            <bigScreenBtn title="安全管理"></bigScreenBtn>
           </el-col>
           <el-col :span="8">
-            <bigScreenBtn title="信息化管理" :selected="false"></bigScreenBtn>
+            <bigScreenBtn title="信息化管理"></bigScreenBtn>
           </el-col>
         </el-row>
       </el-col>