(Electron-vue)侧导航步骤条

nyf_unknown

已于 2022-07-25 11:28:22 修改

阅读量432

点赞数

分类专栏： VUE 文章标签： vue.js electron javascript

于 2022-07-22 09:54:02 首次发布

本文链接：https://blog.csdn.net/qq_44754635/article/details/125925813

版权

VUE 专栏收录该内容

202 篇文章

订阅专栏

本文展示了如何在Electron-vue项目中创建一个侧边栏步骤条，结合Vue.js和Vue Router实现页面切换。通过遍历路由选项获取步骤，并根据当前路由设置激活状态，点击步骤条可跳转至对应页面。涉及到的技术包括Vue组件、路由元信息以及事件处理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

(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,
    }, 
    ...
    ...
  ],
});