From 23208030e6472bf9ee1de687fabbe1093ab03d08 Mon Sep 17 00:00:00 2001
From: yulimchen <yulimchen@gmail.com>
Date: Fri, 19 Feb 2021 11:35:23 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=A2=9E=E5=8A=A0vue-router?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json             |  3 ++-
 src/App.vue              | 25 +++----------------------
 src/main.js              |  3 ++-
 src/router/index.js      |  9 +++++++++
 src/router/routes.js     | 12 ++++++++++++
 src/views/Demo/index.vue | 31 +++++++++++++++++++++++++++++++
 6 files changed, 59 insertions(+), 24 deletions(-)
 create mode 100644 src/router/index.js
 create mode 100644 src/router/routes.js
 create mode 100644 src/views/Demo/index.vue

diff --git a/package.json b/package.json
index 543bf5c..a97b63e 100644
--- a/package.json
+++ b/package.json
@@ -11,7 +11,8 @@
     "core-js": "^3.6.5",
     "normalize.css": "^8.0.1",
     "vant": "^3.0.6",
-    "vue": "^3.0.5"
+    "vue": "^3.0.5",
+    "vue-router": "^4.0.3"
   },
   "devDependencies": {
     "@vue/cli-plugin-babel": "~4.5.0",
diff --git a/src/App.vue b/src/App.vue
index 7ee79e7..4982ba7 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,32 +1,13 @@
 <template>
-  <div>
-    <img alt="Vue logo" src="./assets/logo.png">
-    <Dialogue />
-    <div>
-      <svg-icon icon-class="checkin" style="font-size: 50px; margin-top: 30px;" />
-      <div>SVG</div>
-    </div>
-  </div>
+  <router-view />
 </template>
 
 <script>
-import Dialogue from './components/Dialogue'
-
 export default {
-  name: 'App',
-  components: {
-    Dialogue
-  }
+  name: 'App'
 }
 </script>
 
 <style>
-#app {
-  font-family: 'Avenir', Helvetica, Arial, sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  text-align: center;
-  color: #2c3e50;
-  margin-top: 60px;
-}
+
 </style>
diff --git a/src/main.js b/src/main.js
index 62cbd7c..66e5255 100644
--- a/src/main.js
+++ b/src/main.js
@@ -1,4 +1,5 @@
 import { createApp } from 'vue'
+import router from './router'
 import App from './App.vue'
 
 // normalize.css
@@ -14,4 +15,4 @@ registerVantComp(app)
 import { registerSvgIconComp } from '@/plugins/registerSvgIcon'
 registerSvgIconComp(app)
 
-app.mount('#app')
+app.use(router).mount('#app')
diff --git a/src/router/index.js b/src/router/index.js
new file mode 100644
index 0000000..7650ac7
--- /dev/null
+++ b/src/router/index.js
@@ -0,0 +1,9 @@
+import { createWebHashHistory, createRouter } from 'vue-router'
+import routes from './routes'
+
+const router = createRouter({
+  history: createWebHashHistory(),
+  routes
+})
+
+export default router
diff --git a/src/router/routes.js b/src/router/routes.js
new file mode 100644
index 0000000..c5bbf26
--- /dev/null
+++ b/src/router/routes.js
@@ -0,0 +1,12 @@
+const routes = [
+  {
+    path: '/',
+    name: 'root',
+    component: () => import('@/views/Demo'),
+    children: [
+
+    ]
+  }
+]
+
+export default routes
diff --git a/src/views/Demo/index.vue b/src/views/Demo/index.vue
new file mode 100644
index 0000000..0ad39f0
--- /dev/null
+++ b/src/views/Demo/index.vue
@@ -0,0 +1,31 @@
+<template>
+  <div>
+    <img alt="Vue logo" src="~@/assets/logo.png">
+    <Dialogue />
+    <div>
+      <svg-icon icon-class="checkin" style="font-size: 50px; margin-top: 30px;" />
+      <div>SVG</div>
+    </div>
+  </div>
+</template>
+
+<script>
+import Dialogue from '@/components/Dialogue'
+
+export default {
+  name: 'App',
+  components: {
+    Dialogue
+  }
+}
+</script>
+
+<style>
+#app {
+  font-family: 'Avenir', Helvetica, Arial, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-align: center;
+  color: #2c3e50;
+}
+</style>