菜单跳转

src/App.vue

@@ -2,18 +2,10 @@
   <router-view class="dark"></router-view>
   <div class="menu-wrapper">
     <span class="iconfont icon-settings" :class="{active: menuShow}" @click="menuShow = !menuShow"></span>
-    <div class="menu-list" :style="{width: menuShow ? '180px' : 0}">
+    <div class="menu-list" :style="{width: menuShow ? '180px' : '10px'}">
-      <div class="menu-item">
+      <div class="menu-item" v-for="(item,index) in menus" :key="index" @click="toPath(item.routeName)">
-        <span class="iconfont icon-home"></span>
+        <span class="iconfont" :class="item.icon"></span>
-        <div>首页</div>
+        <div>{{ item.name }}</div>
-      </div>
-      <div class="menu-item">
-        <span class="iconfont icon-compass"></span>
-        <div>视迹</div>
-      </div>
-      <div class="menu-item">
-        <span class="iconfont icon-record"></span>
-        <div>观呼吸</div>
       </div>
     </div>
   </div>
@@ -24,7 +16,28 @@ export default {
   name: 'App',
   data() {
     return {
-      menuShow: false
+      menuShow: false,
+      menus: [{
+        icon: 'icon-home',
+        name: '首页',
+        routeName: 'Guide'
+      },{
+        icon: 'icon-compass',
+        name: '视迹',
+        routeName: 'History'
+      },{
+        icon: 'icon-record',
+        name: '观呼吸'
+      }]
+    }
+  },
+  methods: {
+    toPath(routeName) {
+      if(!routeName) {
+        return
+      }
+      this.$router.push({name: routeName})
+      this.menuShow = false
     }
   }
 }
@@ -96,7 +109,7 @@ body {
     position: absolute;
     left: 0;
     top: 0;
-    padding-left: 50px;
+    padding-left: 40px;
     padding-bottom: 6px;
     padding-top: 4px;
     background-color: #FFF;

src/router.js

@@ -2,10 +2,12 @@ import { createRouter, createWebHashHistory } from 'vue-router'
 
 import Guide from '@/views/Guide.vue'
 import Introduce from '@/views/Introduce.vue'
+import History from '@/views/History.vue'
 
 const routes = [
   { path: '/', name: 'Guide', component: Guide },
   { path: '/introduce', name: 'Introduce', component: Introduce },
+  { path: '/history', name: 'History', component: History },
 ]
 
 export default createRouter({

src/views/History.vue

@@ -0,0 +1,13 @@
+<template>
+  <div>这是历史记录页面</div>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style>
+
+</style>