路由的临时代码

package-lock.json

@@ -10,13 +10,15 @@
       "dependencies": {
         "core-js": "^3.8.3",
         "element-plus": "^2.3.12",
-        "vue": "^3.2.13"
+        "vue": "^3.2.13",
+        "vue-router": "^4.0.3"
       },
       "devDependencies": {
         "@babel/core": "^7.12.16",
         "@babel/eslint-parser": "^7.12.16",
         "@vue/cli-plugin-babel": "~5.0.0",
         "@vue/cli-plugin-eslint": "~5.0.0",
+        "@vue/cli-plugin-router": "~5.0.0",
         "@vue/cli-service": "~5.0.0",
         "eslint": "^7.32.0",
         "eslint-plugin-vue": "^8.0.3"
@@ -3051,6 +3053,11 @@
       "integrity": "sha512-ncTzHV7NvsQZkYe1DW7cbDLm0YpzHmZF5r/iyP3ZnQtMiJ+pjzisCiMNI+Sj+xQF5pXhSHxSB3uDbsBTzY/c2A==",
       "dev": true
     },
+    "node_modules/@vue/devtools-api": {
+      "version": "6.5.0",
+      "resolved": "https://registry.npmmirror.com/@vue/devtools-api/-/devtools-api-6.5.0.tgz",
+      "integrity": "sha512-o9KfBeaBmCKl10usN4crU53fYtC1r7jJwdGKjPT24t348rHxgfpZ0xL3Xm/gLUYnc0oTp8LAmrxOeLyu6tbk2Q=="
+    },
     "node_modules/@vue/reactivity": {
       "version": "3.3.4",
       "resolved": "https://registry.npmmirror.com/@vue/reactivity/-/reactivity-3.3.4.tgz",
@@ -10600,6 +10607,17 @@
         "node": ">=8"
       }
     },
+    "node_modules/vue-router": {
+      "version": "4.2.4",
+      "resolved": "https://registry.npmmirror.com/vue-router/-/vue-router-4.2.4.tgz",
+      "integrity": "sha512-9PISkmaCO02OzPVOMq2w82ilty6+xJmQrarYZDkjZBfl4RvYAlt4PKnEX21oW4KTtWfa9OuO/b3qk1Od3AEdCQ==",
+      "dependencies": {
+        "@vue/devtools-api": "^6.5.0"
+      },
+      "peerDependencies": {
+        "vue": "^3.2.0"
+      }
+    },
     "node_modules/vue-style-loader": {
       "version": "4.1.3",
       "resolved": "https://registry.npmmirror.com/vue-style-loader/-/vue-style-loader-4.1.3.tgz",

package.json

@@ -2,15 +2,6 @@
   "name": "vue3_element_demo1",
   "version": "0.1.0",
   "private": true,
-  "devDependencies": {
-    "@babel/core": "^7.12.16",
-    "@babel/eslint-parser": "^7.12.16",
-    "@vue/cli-plugin-babel": "~5.0.0",
-    "@vue/cli-plugin-eslint": "~5.0.0",
-    "@vue/cli-service": "~5.0.0",
-    "eslint": "^7.32.0",
-    "eslint-plugin-vue": "^8.0.3"
-  },
   "scripts": {
     "serve": "vue-cli-service serve",
     "build": "vue-cli-service build",
@@ -19,7 +10,18 @@
   "dependencies": {
     "core-js": "^3.8.3",
     "element-plus": "^2.3.12",
-    "vue": "^3.2.13"
+    "vue": "^3.2.13",
+    "vue-router": "^4.0.3"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.12.16",
+    "@babel/eslint-parser": "^7.12.16",
+    "@vue/cli-plugin-babel": "~5.0.0",
+    "@vue/cli-plugin-eslint": "~5.0.0",
+    "@vue/cli-plugin-router": "~5.0.0",
+    "@vue/cli-service": "~5.0.0",
+    "eslint": "^7.32.0",
+    "eslint-plugin-vue": "^8.0.3"
   },
   "eslintConfig": {
     "root": true,
@@ -41,6 +43,6 @@
     "not dead",
     "not ie 11"
   ],
-  "readme": "ERROR: No README data found!",
-  "_id": "vue3_element_demo1@0.1.0"
+  "_id": "vue3_element_demo1@0.1.0",
+  "readme": "ERROR: No README data found!"
 }

src/App.vue

@@ -1,35 +1,7 @@
 <template>
-  <ChildComponentA>
-    <!--  具名插槽的调用形式 <template v-slot:插槽名称>  -->
-    <template v-slot:header>
-      <!--   主函数设置动态数据   -->
-      <P>{{ tips }}</P>
+  <nav>
+    <router-link to="/">Home</router-link> |
+    <router-link to="/about">About</router-link>
+  </nav>
+  <router-view/>
 </template>
-    <!--  带有参数的插槽引用  <template v-slot:插槽名称="参数代理"> 可以通过访问子组件数据-->
-    <template v-slot:default="slot_data_types">
-      <p>我的错误是<span>{{ slot_data_types.types['500'] }}</span></p>
-    </template>
-    <!--  v-slot可以简写为#  -->
-    <!--  包含多个参数的传递时，可以使用对象格式, 按照子组件的传值顺序进行映射， 参数名需要与子组件一致  -->
-    <template #footer="{types, sources}">
-      <div>错误来自：{{ sources['page'] }} - {{ types['404'] }}</div>
-    </template>
-  </ChildComponentA>
-</template>
-
-<script>
-import ChildComponentA from "@/components/ChildComponentA.vue";
-
-export default {
-  components: {ChildComponentA},
-  data() {
-    return {
-      tips: "提示",
-    }
-  }
-}
-</script>
-
-<style scoped>
-
-</style>

src/main.js

@@ -1,4 +1,5 @@
 import {createApp} from "vue";
 import App from "./App.vue"
+import router from './router'
 
-createApp(App).mount('#app')
+createApp(App).use(router).mount('#app')

src/router/index.js

@@ -0,0 +1,22 @@
+import { createRouter, createWebHashHistory } from 'vue-router'
+import HomeView from '../views/HomeView.vue'
+
+const routes = [
+  {
+    path: '/',
+    name: 'home',
+    component: HomeView
+  },
+  {
+    path: '/about',
+    name: 'about',
+    component: () => import(/* webpackChunkName: "about" */ '../views/AboutView.vue')
+  }
+]
+
+const router = createRouter({
+  history: createWebHashHistory(),
+  routes
+})
+
+export default router

src/views/AboutView.vue

@@ -0,0 +1,3 @@
+<template>
+  <h3>这是About</h3>
+</template>

src/views/HomeView.vue

@@ -0,0 +1,3 @@
+<template>
+  <h3>这是Home</h3>
+</template>