完成路由的第一个范例

demo/router-basic/App.vue

@@ -0,0 +1,7 @@
+<template>
+  <nav>
+    <router-link to="/"><span>Home</span></router-link> |
+    <router-link to="/about"><span>About</span></router-link>
+  </nav>
+  <router-view/>
+</template>

demo/router-basic/main.js

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

demo/router-basic/router/index.js

@@ -0,0 +1,28 @@
+// 引入必要的router组件
+import { createRouter, createWebHashHistory, createWebHistory } from 'vue-router'
+// 引入视图
+import HomeView from '../views/HomeView.vue'
+
+// 创建路由，包含path，name，component属性， component属性可以使用箭头函数直接引入视图
+const routes = [
+  {
+    path: '/',
+    name: 'home',
+    component: HomeView
+  },
+  {
+    path: '/about',
+    name: 'about',
+    component: () => import(/* webpackChunkName: "about" */ '../views/AboutView.vue')
+  }
+]
+
+// 创建路由器，使用createRouter方法，传入history（路由类型）和 创建好的路由routes
+// 路由类型分为hash型和html5型，分别为createWebHashHistory和createWebHistory
+const router = createRouter({
+  history: createWebHistory(),
+  routes
+})
+
+// 导出路由
+export default router

demo/router-basic/views/AboutView.vue

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

demo/router-basic/views/HomeView.vue

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

src/App.vue

@@ -1,7 +1,7 @@
 <template>
   <nav>
-    <router-link to="/">Home</router-link> |
-    <router-link to="/about">About</router-link>
+    <router-link to="/"><span>Home</span></router-link> |
+    <router-link to="/about"><span>About</span></router-link>
   </nav>
   <router-view/>
 </template>

src/components/ChildComponentA.vue

@@ -1,64 +0,0 @@
-<template>
-  <div class="wrap">
-    <div class="header">
-      <!--   具名插槽： 使用name定义了插槽的名称，在父组件中可以使用此名称调用插槽   -->
-      <!--   字符串"错误"是插槽的默认值,当没有传值时使用默认值   -->
-      <slot name="header">错误</slot>
-      <div class="close">关闭</div>
-    </div>
-    <div>
-      <!--   插槽中可以使用v-bind绑定参数，可以在父组件中使用此参数   -->
-      <slot :types="types"></slot>
-    </div>
-    <div class="footer">
-      <!--   可以使用v-bind绑定多个参数，同时需要在父组件中以对象形式按照顺序进行映射   -->
-      <slot name="footer" :types="types" :sources="sources"></slot>
-    </div>
-  </div>
-</template>
-
-<script>
-export default {
-  data() {
-    return {
-      types: {
-        404: 'Page Not Found',
-        500: 'System Error',
-      },
-      sources: {
-        system: '系统',
-        page: '页面',
-        console: '控制台',
-      }
-    }
-  }
-}
-</script>
-
-<style scoped>
-.wrap {
-  border: 1px solid #f66;
-  color: #f66;
-  padding: 10px;
-  position: relative;
-  max-width: 300px;
-}
-
-.header {
-  font-size: 20px;
-  color: #333;
-  font-weight: bold;
-}
-
-.close {
-  position: absolute;
-  right: 10px;
-  top: 10px;
-}
-
-.footer {
-  color: #666;
-  font-size: 12px;
-  text-align: right;
-}
-</style>

src/router/index.js

@@ -1,6 +1,9 @@
-import { createRouter, createWebHashHistory } from 'vue-router'
+// 引入必要的router组件
+import { createRouter, createWebHashHistory, createWebHistory } from 'vue-router'
+// 引入视图
 import HomeView from '../views/HomeView.vue'
 
+// 创建路由，包含path，name，component属性， component属性可以使用箭头函数直接引入视图
 const routes = [
   {
     path: '/',
@@ -14,9 +17,12 @@ const routes = [
   }
 ]
 
+// 创建路由器，使用createRouter方法，传入history（路由类型）和 创建好的路由routes
+// 路由类型分为hash型和html5型，分别为createWebHashHistory和createWebHistory
 const router = createRouter({
-  history: createWebHashHistory(),
+  history: createWebHistory(),
   routes
 })
 
+// 导出路由
 export default router