feat: 增加vue-router

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",

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>

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')

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

src/router/routes.js

@@ -0,0 +1,12 @@
+const routes = [
+  {
+    path: '/',
+    name: 'root',
+    component: () => import('@/views/Demo'),
+    children: [
+
+    ]
+  }
+]
+
+export default routes

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>