学习vue-router组件！！！

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

@@ -0,0 +1,36 @@
+<!--
+ * @Author: Kane
+ * @Date: 2022-11-24 01:13:55
+ * @LastEditors: Kane
+ * @LastEditTime: 2022-11-24 01:47:59
+ * @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>
+  <hr />
+  <router-view></router-view>
+</template>
+
+<script>
+export default {
+  name: "App",
+  components: {},
+};
+</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>

入门/cli/hello-router/src/components/HelloWorld.vue

@@ -0,0 +1,58 @@
+<template>
+  <div class="hello">
+    <h1>{{ msg }}</h1>
+    <p>
+      For a guide and recipes on how to configure / customize this project,<br>
+      check out the
+      <a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
+    </p>
+    <h3>Installed CLI Plugins</h3>
+    <ul>
+      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li>
+      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint" target="_blank" rel="noopener">eslint</a></li>
+    </ul>
+    <h3>Essential Links</h3>
+    <ul>
+      <li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
+      <li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
+      <li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
+      <li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
+      <li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
+    </ul>
+    <h3>Ecosystem</h3>
+    <ul>
+      <li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
+      <li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
+      <li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
+      <li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
+      <li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
+    </ul>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'HelloWorld',
+  props: {
+    msg: String
+  }
+}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped>
+h3 {
+  margin: 40px 0 0;
+}
+ul {
+  list-style-type: none;
+  padding: 0;
+}
+li {
+  display: inline-block;
+  margin: 0 10px;
+}
+a {
+  color: #42b983;
+}
+</style>

入门/cli/hello-router/src/components/功能页面/demo-1.vue

@@ -0,0 +1,25 @@
+<!--
+ * @Author: Kane
+ * @Date: 2022-11-24 01:18:18
+ * @LastEditors: Kane
+ * @LastEditTime: 2022-11-24 01:21:20
+ * @FilePath: \hello-router\src\components\功能页面\demo-1.vue
+ * @Description: 
+ * 
+ * Copyright (c) ${2022} by Kane, All Rights Reserved. 
+-->
+<template>
+  <h1>{{ title }}</h1>
+</template>
+<script>
+export default {
+  name: "demo-1",
+  data() {
+    return {
+      title: "测试router-1",
+    };
+  },
+};
+</script>
+<style scoped>
+</style>

入门/cli/hello-router/src/components/功能页面/demo-2.vue

@@ -0,0 +1,25 @@
+<!--
+ * @Author: Kane
+ * @Date: 2022-11-24 01:20:58
+ * @LastEditors: Kane
+ * @LastEditTime: 2022-11-24 01:22:30
+ * @FilePath: \hello-router\src\components\功能页面\demo-2.vue
+ * @Description: 
+ * 
+ * Copyright (c) ${2022} by Kane, All Rights Reserved. 
+-->
+<template>
+  <h1>{{ title }}</h1>
+</template>
+<script>
+export default {
+  name: "demo-2",
+  data() {
+    return {
+      title: "测试页面-2",
+    };
+  },
+};
+</script>
+<style scoped>
+</style>

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

@@ -0,0 +1,33 @@
+/*
+ * @Author: Kane
+ * @Date: 2022-11-24 01:13:55
+ * @LastEditors: Kane
+ * @LastEditTime: 2022-11-24 01:34:13
+ * @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 App from "./App.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 },
+];
+
+//创建路由对象
+const router = createRouter({
+    history: createWebHashHistory(),
+    routes: routes
+});
+
+app.use(router);
+app.mount("#app");