From 02eca967392537b2cd1fceea9e5406ab0dc93d93 Mon Sep 17 00:00:00 2001
From: SaarHV <dev16102@linx-info.com>
Date: Thu, 1 Dec 2022 16:41:35 +0800
Subject: [PATCH] Add the vue-router component

---
 package.json               |  3 ++-
 src/App.vue                | 47 +-------------------------------------
 src/main.ts                | 10 ++++----
 src/router/index.ts        | 40 ++++++++++++++++++++++++++++++++
 src/views/home/index.vue   | 10 ++++++++
 src/views/layout/index.vue | 10 ++++++++
 src/views/login/index.vue  |  3 +++
 7 files changed, 72 insertions(+), 51 deletions(-)
 create mode 100644 src/router/index.ts
 create mode 100644 src/views/home/index.vue
 create mode 100644 src/views/layout/index.vue
 create mode 100644 src/views/login/index.vue

diff --git a/package.json b/package.json
index 2c0dae3..ec8892f 100644
--- a/package.json
+++ b/package.json
@@ -7,7 +7,8 @@
   },
   "dependencies": {
     "element-plus": "^v1.0.1-beta.14",
-    "vue": "^3.0.4"
+    "vue": "^3.0.4",
+    "vue-router": "^4.0.1"
   },
   "devDependencies": {
     "@vue/compiler-sfc": "^3.0.4",
diff --git a/src/App.vue b/src/App.vue
index eec35c6..98240ae 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,48 +1,3 @@
 <template>
-  <el-row>
-    <el-button>默认按钮</el-button>
-    <el-button type="primary">主要按钮</el-button>
-    <el-button type="success">成功按钮</el-button>
-    <el-button type="info">信息按钮</el-button>
-    <el-button type="warning">警告按钮</el-button>
-    <el-button type="danger">危险按钮</el-button>
-  </el-row>
-  <div class="aa">
-    22
-    <div class="bb">33</div>
-    <div class="red">44</div>
-  </div>
-  <el-color-picker v-model="color" @change="colorChange"></el-color-picker>
+  <router-view />
 </template>
-
-<script lang="ts">
-import { reactive, toRefs } from "vue";
-export default {
-  name: "App",
-  setup() {
-    const state = reactive({
-      color: "",
-    });
-    function colorChange() {
-      console.log(state.color);
-      document
-        .getElementsByTagName("body")[0]
-        .style.setProperty("--primary", state.color);
-    }
-    return {
-      colorChange,
-      ...toRefs(state),
-    };
-  },
-};
-</script>
-
-<style scoped lang="scss">
-.aa {
-  border: 1px solid red;
-  .bb {
-    color: blue;
-    display: flex;
-  }
-}
-</style>
\ No newline at end of file
diff --git a/src/main.ts b/src/main.ts
index cc61cc0..631b4e0 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -1,8 +1,10 @@
 import { createApp } from 'vue'
 import App from './App.vue'
+import router from './router'
 
-import ElementPlus from 'element-plus';
-import 'element-plus/lib/theme-chalk/index.css';
-import '/@/theme/index.scss';
+import ElementPlus from 'element-plus'
+import 'element-plus/lib/theme-chalk/index.css'
+import '/@/theme/index.scss'
+import { locale } from 'element-plus'
 
-createApp(App).use(ElementPlus, { size: 'small' }).mount('#app')
+createApp(App).use(router).use(ElementPlus, { locale }).mount('#app')
diff --git a/src/router/index.ts b/src/router/index.ts
new file mode 100644
index 0000000..a6792ce
--- /dev/null
+++ b/src/router/index.ts
@@ -0,0 +1,40 @@
+import { createRouter, createWebHashHistory, RouteRecordRaw } from "vue-router"
+
+const staticRoutes: Array<RouteRecordRaw> = [
+    {
+        path: '/',
+        name: 'home',
+        component: () => import('/@/views/layout/index.vue'),
+        redirect: '/home',
+        meta: {
+            title: '首页'
+        },
+        children: [{
+            path: '/home',
+            name: 'home',
+            component: () => import('/@/views/home/index.vue'),
+            meta: {
+                title: '首页'
+            }
+        }]
+    },
+    {
+        path: '/login',
+        name: 'login',
+        component: () => import('/@/views/login/index.vue'),
+        meta: {
+            title: '登录'
+        }
+    },
+    {
+        path: '/:pathMatch(.*)',
+        redirect: '/'
+    }
+]
+
+const router = createRouter({
+    history: createWebHashHistory(),
+    routes: staticRoutes
+})
+
+export default router
\ No newline at end of file
diff --git a/src/views/home/index.vue b/src/views/home/index.vue
new file mode 100644
index 0000000..8c7788f
--- /dev/null
+++ b/src/views/home/index.vue
@@ -0,0 +1,10 @@
+<template>
+    home
+    </template>
+    
+    <script lang="ts">
+    export default {
+      name: "home",
+    };
+    </script>
+    
\ No newline at end of file
diff --git a/src/views/layout/index.vue b/src/views/layout/index.vue
new file mode 100644
index 0000000..434632d
--- /dev/null
+++ b/src/views/layout/index.vue
@@ -0,0 +1,10 @@
+<template>
+    layout
+    <router-view></router-view>
+</template>
+  
+<script lang="ts">
+export default {
+    name: "layout",
+};
+</script>
diff --git a/src/views/login/index.vue b/src/views/login/index.vue
new file mode 100644
index 0000000..b38af0c
--- /dev/null
+++ b/src/views/login/index.vue
@@ -0,0 +1,3 @@
+<template>
+    login
+</template>
-- 
Gitee