保存进度！

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

@@ -2,7 +2,7 @@
  * @Author: Kane
  * @Date: 2022-11-24 01:13:55
  * @LastEditors: Kane
- * @LastEditTime: 2022-11-24 01:47:59
+ * @LastEditTime: 2022-11-24 09:51:12
  * @FilePath: \hello-router\src\App.vue
  * @Description: 
  * 
@@ -12,7 +12,9 @@
   <!-- <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>
+  <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>
 </template>

入门/cli/hello-router/src/components/功能页面/路由守卫.vue

@@ -0,0 +1,33 @@
+<!--
+ * @Author: Kane
+ * @Date: 2022-11-24 09:42:35
+ * @LastEditors: Kane
+ * @LastEditTime: 2022-11-24 09:58:11
+ * @FilePath: \hello-router\src\components\功能页面\路由守卫.vue
+ * @Description: 
+ * 
+ * Copyright (c) ${2022} by Kane, All Rights Reserved. 
+-->
+<template>
+  <h1>路由守卫</h1>
+  <h1>{{ user.name }}</h1>
+</template>
+<script>
+export default {
+  name: "route-guard",
+  data() {
+    return {
+      user: {
+        name: "",
+        age: 20,
+      },
+    };
+  },
+  beforeRouteUpdate(to) {
+    alert(to.params.username);
+    this.user.name = to.params.username;
+  },
+};
+</script>
+<style scoped>
+</style>

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

@@ -2,7 +2,7 @@
  * @Author: Kane
  * @Date: 2022-11-24 01:13:55
  * @LastEditors: Kane
- * @LastEditTime: 2022-11-24 01:34:13
+ * @LastEditTime: 2022-11-24 09:59:55
  * @FilePath: \hello-router\src\main.js
  * @Description: 
  * 
@@ -10,24 +10,23 @@
  */
 
 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 demo1 from "./components/功能页面/demo-1.vue";
+import demo2 from "./components/功能页面/demo-2.vue";
+import rg from "./components/功能页面/路由守卫.vue";
 
 const app = createApp(App);
-
-//定义路由
 const routes = [
-    { path: "/demo-1", component: Demo1 },
-    { path: "/demo-2", component: Demo2 },
+    { path: "/demo-1", component: demo1 },
+    { path: "/demo-2", component: demo2 },
+    { path: "/user/:username", component: rg }
 ];
 
-//创建路由对象
 const router = createRouter({
     history: createWebHashHistory(),
     routes: routes
-});
+})
 
 app.use(router);
 app.mount("#app");