feat: add vue router

kevin · kevin · commit 51ff7459259c · 2022-04-19T10:53:53.000+08:00
diff --git a/README.md b/README.md
@@ -156,3 +156,50 @@ npx --no-install lint-staged
 ```
 
 ### router
+
+安装 `vue-router`
+
+```
+npm install vue-router@4
+```
+
+创建 `router/index.js`
+
+```
+import { createRouter, createWebHashHistory } from 'vue-router'
+import Layout from '../layouts/Layout.vue'
+const routes = [
+  {
+    path: '/',
+    name: 'Layout',
+    component: Layout,
+    redirect: 'home',
+    children: [
+      {
+        path: 'home',
+        name: 'Home',
+        component: () => import('../pages/Home.vue')
+      }
+    ]
+  }
+]
+
+const router = createRouter({
+  routes: routes,
+  history: createWebHashHistory()
+})
+
+export default router
+```
+
+在 `main.js`中引入路由
+
+```
+...
+
+import router from './router'
+
+const app = createApp(App)
+app.use(router)
+app.mount('#app')
+```
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -10,7 +10,8 @@
     "prepare": "husky install"
   },
   "dependencies": {
-    "vue": "^3.2.25"
+    "vue": "^3.2.25",
+    "vue-router": "^4.0.14"
   },
   "devDependencies": {
     "@babel/core": "^7.17.9",
@@ -34,4 +35,4 @@
       "prettier --write"
     ]
   }
-}
+}
diff --git a/src/App.vue b/src/App.vue
@@ -1,12 +1,7 @@
-<script setup>
-import HelloWorld from './components/HelloWorld.vue'
-import Main from './components/Main.vue'
-</script>
+<script setup></script>
 
 <template>
-  <img alt="Vue logo" src="./assets/logo.png" />
-  <HelloWorld msg="Hello Vue 3 + Vite" />
-  <Main />
+  <router-view></router-view>
 </template>
 
 <style>
diff --git a/src/layouts/Layout.vue b/src/layouts/Layout.vue
@@ -0,0 +1,13 @@
+<template>
+  <router-view></router-view>
+</template>
+
+<script>
+export default {
+  setup() {
+    return {}
+  }
+}
+</script>
+
+<style scoped></style>
diff --git a/src/main.js b/src/main.js
@@ -1,4 +1,8 @@
 import { createApp } from 'vue'
 import App from './App.vue'
 
-createApp(App).mount('#app')
+import router from './router'
+
+const app = createApp(App)
+app.use(router)
+app.mount('#app')
diff --git a/src/pages/Home.vue b/src/pages/Home.vue
@@ -0,0 +1,13 @@
+<template>
+  <div>Home</div>
+</template>
+
+<script>
+export default {
+  setup() {
+    return {}
+  }
+}
+</script>
+
+<style scoped></style>
diff --git a/src/router/index.js b/src/router/index.js
@@ -0,0 +1,24 @@
+import { createRouter, createWebHashHistory } from 'vue-router'
+import Layout from '../layouts/Layout.vue'
+const routes = [
+  {
+    path: '/',
+    name: 'Layout',
+    component: Layout,
+    redirect: 'home',
+    children: [
+      {
+        path: 'home',
+        name: 'Home',
+        component: () => import('../pages/Home.vue')
+      }
+    ]
+  }
+]
+
+const router = createRouter({
+  routes: routes,
+  history: createWebHashHistory()
+})
+
+export default router
