(Electron-vue)侧导航步骤条

(Electron-vue)侧导航步骤条

效果：

App.vue

<div class="step-line">
  <div class="line">
    <div v-for="(item, index) in steps" :key="index" class="item" :class="currentStep.name == item.name?'active':''" @click="goStep(item)">{{item.meta.title}}</div>
  </div>
</div>

<div class="content">
  <router-view></router-view>
</div> 

export default {
  name: "device_gui",
  computed: {
    steps(){
      return this.$router.options.routes
    },
    currentStep(){
      return this.$route
    }
  }, 
  methods: {
    goStep(route){
      console.log(route);
      this.$router.push(route.path)
    }
  },
};

router->index.js

import Vue from 'vue';
import Router from 'vue-router';

Vue.use(Router);

export default new Router({
  routes: [ 
    ...
    ...
    {
      path: '/pump',
      name: 'pump',
      meta: {
        title: '正压泵加压'
      },
      component: require('@/pages/Pump').default,
    },
    {
      path: '/temperature',
      name: 'temperature',
      meta: {
        title: '温控..'
      },
      component: require('@/pages/Temperature').default,
    },
    {
      path: '/scanner',
      name: 'scanner',
      meta: {
        title: '扫描....'
      },
      component: require('@/pages/Scanner').default,
    }, 
    ...
    ...
  ],
});