学习路由！

入门/cli/hello-router/src/App.vue

@@ -2,30 +2,27 @@
  * @Author: Kane
  * @Date: 2022-11-24 01:13:55
  * @LastEditors: Kane
- * @LastEditTime: 2022-11-24 09:51:12
+ * @LastEditTime: 2022-11-25 16:35:46
  * @FilePath: \hello-router\src\App.vue
  * @Description: 
  * 
  * Copyright (c) ${2022} by Kane, All Rights Reserved. 
 -->
 <template>
-  <!-- <img alt="Vue logo" src="./assets/logo.png" /> -->
-  <h1>测试vue-router</h1>
-  <router-link to="/demo-1">页面一</router-link><br />
-  <router-link to="/demo-2">页面二</router-link><br />
-  <router-link to="/user/Kane">Kane</router-link><br />
-  <router-link to="/user/Aga">Aga</router-link>
-  <hr />
-  <router-view></router-view>
+  <el-container>
+    <el-header><Header></Header></el-header>
+    <el-main><Main></Main></el-main>
+  </el-container>
 </template>
-
 <script>
+import Header from "./components/页面组件/Header";
+import Main from "./components/页面组件/Main";
+
 export default {
   name: "App",
-  components: {},
+  components: { Header, Main },
 };
 </script>
-
 <style>
 #app {
   font-family: Avenir, Helvetica, Arial, sans-serif;

入门/cli/hello-router/src/components/页面组件/Header.vue

@@ -0,0 +1,32 @@
+<!--
+ * @Author: Kane
+ * @Date: 2022-11-25 15:29:48
+ * @LastEditors: Kane
+ * @LastEditTime: 2022-11-25 15:36:18
+ * @FilePath: \hello-router\src\components\页面组件\header.vue
+ * @Description: 
+ * 
+ * Copyright (c) ${2022} by Kane, All Rights Reserved. 
+-->
+<template>
+  <div class="container">
+    <h1>我来组成头部！</h1>
+  </div>
+</template>
+<script>
+export default {
+  name: "header-part",
+  data() {
+    return {};
+  },
+};
+</script>
+<style scoped>
+.container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100px;
+  border: 1px solid red;
+}
+</style>

入门/cli/hello-router/src/components/页面组件/Main.vue

@@ -0,0 +1,34 @@
+<!--
+ * @Author: Kane
+ * @Date: 2022-11-25 15:29:55
+ * @LastEditors: Kane
+ * @LastEditTime: 2022-11-25 15:37:49
+ * @FilePath: \hello-router\src\components\页面组件\main.vue
+ * @Description: 
+ * 
+ * Copyright (c) ${2022} by Kane, All Rights Reserved. 
+-->
+<template>
+  <div class="container">
+    <h1>{{ title }}</h1>
+  </div>
+</template>
+<script>
+export default {
+  name: "main-part",
+  data() {
+    return {
+      title: "我来组成身体！",
+    };
+  },
+};
+</script>
+<style scoped>
+.container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100px;
+  border: 1px solid red;
+}
+</style>

入门/cli/hello-router/src/main.js

@@ -1,32 +1,26 @@
 /*
  * @Author: Kane
- * @Date: 2022-11-24 01:13:55
+ * @Date: 2022-11-24 09:08:41
  * @LastEditors: Kane
- * @LastEditTime: 2022-11-24 09:59:55
+ * @LastEditTime: 2022-11-25 16:22:52
  * @FilePath: \hello-router\src\main.js
  * @Description: 
  * 
  * Copyright (c) ${2022} by Kane, All Rights Reserved. 
  */
-
 import { createApp } from "vue";
-import { createRouter, createWebHashHistory } from 'vue-router';
+// import { createRouter, createWebHashHistory } from "vue-router";
+
+//引入组件
 import App from "./App.vue";
-import demo1 from "./components/功能页面/demo-1.vue";
-import demo2 from "./components/功能页面/demo-2.vue";
-import rg from "./components/功能页面/路由守卫.vue";
+// import { Header } from "./components/页面组件/Header.vue";
+// import { Main } from "./components/页面组件/Main.vue";
+// import { demo1 } from "./components/功能页面/demo-1.vue";
+// import { demo2 } from "./components/功能页面/demo-2.vue";
 
 const app = createApp(App);
-const routes = [
-    { path: "/demo-1", component: demo1 },
-    { path: "/demo-2", component: demo2 },
-    { path: "/user/:username", component: rg }
-];
+// const routes = [
+//     {path}
+// ];
 
-const router = createRouter({
-    history: createWebHashHistory(),
-    routes: routes
-})
-
-app.use(router);
 app.mount("#app");