路由尚硅谷031,032学习实例

package-lock.json

@@ -9,7 +9,8 @@
       "version": "0.0.0",
       "dependencies": {
         "axios": "^1.12.2",
-        "vue": "^3.5.22"
+        "vue": "^3.5.22",
+        "vue-router": "^4.5.1"
       },
       "devDependencies": {
         "@tsconfig/node22": "^22.0.2",
@@ -1487,6 +1488,12 @@
         "@vue/shared": "3.5.22"
       }
     },
+    "node_modules/@vue/devtools-api": {
+      "version": "6.6.4",
+      "resolved": "https://registry.npmjs.org/@vue/devtools-api/-/devtools-api-6.6.4.tgz",
+      "integrity": "sha512-sGhTPMuXqZ1rVOk32RylztWkfXTRhuS7vgAKv0zjqk8gbsHkJ7xfFf+jbySxt7tWObEJwyKaHMikV/WGDiQm8g==",
+      "license": "MIT"
+    },
     "node_modules/@vue/devtools-core": {
       "version": "8.0.2",
       "resolved": "https://registry.npmjs.org/@vue/devtools-core/-/devtools-core-8.0.2.tgz",
@@ -3350,6 +3357,21 @@
         }
       }
     },
+    "node_modules/vue-router": {
+      "version": "4.5.1",
+      "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-4.5.1.tgz",
+      "integrity": "sha512-ogAF3P97NPm8fJsE4by9dwSYtDwXIY1nFY9T6DyQnGHd1E2Da94w9JIolpe42LJGIl0DwOHBi8TcRPlPGwbTtw==",
+      "license": "MIT",
+      "dependencies": {
+        "@vue/devtools-api": "^6.6.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/posva"
+      },
+      "peerDependencies": {
+        "vue": "^3.2.0"
+      }
+    },
     "node_modules/vue-tsc": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/vue-tsc/-/vue-tsc-3.1.0.tgz",

package.json

@@ -15,7 +15,8 @@
   },
   "dependencies": {
     "axios": "^1.12.2",
-    "vue": "^3.5.22"
+    "vue": "^3.5.22",
+    "vue-router": "^4.5.1"
   },
   "devDependencies": {
     "@tsconfig/node22": "^22.0.2",

src/App.vue

@@ -1,20 +1,99 @@
 <template>
     <div class="app">
-        <h1>Hello World,你好呀!</h1>
+        <h2>VUE路由测试实例</h2>
-       <Person />
+        <!-- 导航区 -->
+         <div class="navigate">
+            <router-link to="/Home" active-class="active">首页</router-link>
+            <router-link to="/Contact" active-class="active">新闻</router-link>
+            <router-link to="/About" active-class="active">产品</router-link>
+        
          </div>
 
+         <!-- 内容区 -->
+         <div class="main-content">
+            <router-view></router-view>
+         </div>
+       
+    </div>
 
 
     </template>
 
     <script setup lang="ts">
-    import Person from './components/Person.vue';
+    import {RouterView, RouterLink} from 'vue-router'
+   
 
 
         
     </script>
 
-    <style scoped>
+<style scoped>
+/* 全局和根容器样式 */
+.app {
+  /* 使用更现代、更易读的字体 */
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+  width: 90%; /* 设置最大宽度，在大屏幕上不会过宽 */
+  height: 800px; /* 设置一个固定的高度，防止内容过多时出现滚动条 */;
+  margin: 40px auto; /* 页面居中，并与顶部保持距离 */
+  padding: 2rem;
+  background-color: #f4f7f9; /* 一个非常浅的灰色背景 */
+  border-radius: 10px; /* 圆角让它看起来更柔和 */
+  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); /* 添加阴影，产生立体感 */
+  color: #333;
+}
 
-    </style>
+/* 标题样式 */
+h2 {
+  text-align: center; /* 标题居中 */
+  color: #2c3e50; /* 使用更深的颜色以突出 */
+  margin-bottom: 2rem; /* 与导航栏拉开距离 */
+  font-weight: 600;
+}
+
+/* 导航容器 */
+.navigate {
+  display: flex; /* 使用 Flexbox 布局，让链接水平排列 */
+  justify-content: center; /* 链接在容器内居中 */
+  gap: 1rem; /* 链接之间的间距 */
+  background-color: #ffffff;
+  padding: 1rem;
+  border-radius: 8px;
+  border: 1px solid #e0e0e0; /* 添加一个细微的边框 */
+  margin-bottom: 2rem;
+}
+
+/* 导航链接 */
+.navigate a {
+  text-decoration: none; /* 去掉下划线 */
+  color: #555; /* 默认链接颜色 */
+  padding: 0.75rem 1.5rem; /* 增大点击区域 */
+  border-radius: 6px; /* 为链接本身也添加圆角 */
+  font-weight: 500; /* 字体稍粗 */
+  transition: all 0.3s ease; /* 为所有变化添加平滑的过渡效果 */
+  position: relative; /* 为下划线动画做准备 */
+  overflow: hidden;
+}
+
+/* 鼠标悬停在链接上时的效果 */
+.navigate a:hover {
+  background-color: #eef2f5; /* 悬停时改变背景色 */
+  color: #007bff; /* 悬停时改变字体颜色 */
+}
+
+/* 当前激活的链接样式 (.active 类) */
+.navigate a.active {
+  background-color: #007bff; /* 使用一个醒目的主色调 */
+  color: #ffffff; /* 字体变为白色 */
+  box-shadow: 0 2px 5px rgba(0, 123, 255, 0.3); /* 为激活项添加一点阴影 */
+}
+
+/* 内容显示区域 */
+.main-content {
+  padding: 2rem;
+  background-color: #ffffff;
+  border-radius: 8px;
+  border: 1px solid #e0e0e0;
+  min-height: 70%; /* 设置一个最小高度，防止内容过少时塌陷 */
+  /* 你可以为 router-view 的过渡动画添加样式 */
+}
+</style>

src/components/Person.vue

@@ -1,67 +0,0 @@
-<template>
-<div class="person">
-<h1>自定义Hooks示例</h1>
-<h2>Sun:{{Sun}}放大十倍的数字:{{ bigSun }}</h2>
-<button @click="addSun">Sun++</button>
-<hr>
-<img v-for="(dog,index) in dogList" :src="dog" :ker="index">
-<br>
-<button @click="getDog">getDog</button>
-
-
-
-
-
-    
-</div>
-
-    </template>
-    
-    <script setup lang="ts">
-    import useSun from '@/hooks/useSun';
-    import useDog from '@/hooks/useDog';
-    const {Sun,addSun,bigSun} = useSun();
-    const {dogList,getDog} = useDog();
-
-
-
-    
-
-    </script>
-    
-
-
-
-
-
-
-
-
-    <style scoped>
-
-        .person{
-            background-color: #a7b8bb;
-            padding: 20px;
-            border-radius: 10px;
-            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
-            width: 80%;
-            height: 20%;
-            margin: 30px auto;
-        }
-        button{
-            background-color: #313633;
-            color: #15d11f;
-            margin: 0 10px;
-            width: 100px;
-            height: 30px;
-            border-radius: 5px;
-            border: none;
-                     
-        }
-        img{
-            margin: 15px;
-            width: 180px;
-            height: 200px;
-        }
-
-    </style>

src/hooks/useDog.ts

@@ -1,27 +0,0 @@
-import { reactive, onMounted } from 'vue';
-    import axios from 'axios';
-    
-
-    export default function useDog(){
-        let dogList = reactive([
-        'https://images.dog.ceo/breeds/schnauzer-giant/n02097130_3891.jpg'
-    ])
-
-
-    async function getDog(){
-        try{
-        let result = await axios.get('https://dog.ceo/api/breeds/image/random')
-        dogList.push(result.data.message)
-        }catch(err){
-            alert('获取失败'+err)
-        }
-    }
-        onMounted(()=>{
-            getDog()
-        })
-        return{
-           
-            dogList, getDog
-        }
-    }
-    

src/hooks/useSun.ts

@@ -1,17 +0,0 @@
-import { ref,computed } from 'vue';
-
-
-
-    export default function useSun(){
-    let Sun = ref(0);
-    let bigSun = computed(()=>{
-        return Sun.value * 10;
-    })
-
-    function addSun(){
-        Sun.value += 10;
-    }
-        return{
-            Sun, addSun, bigSun
-        }
-    }

src/main.ts

@@ -1,3 +1,11 @@
 import { createApp } from "vue";
+// 引入App组件
 import App from "./App.vue";
-createApp(App).mount("#app");
+// 引入路由
+import router from "./router";
+// 创建Vue应用程序实例
+const app = createApp(App);
+// 使用路由
+app.use(router);
+// 挂载应用程序到指定容器
+app.mount("#app");

src/pages/About.vue

@@ -0,0 +1,16 @@
+<template>
+  <div>
+    <h1>About关于页面,---===---阿萨大大缓解按时鉴定会叫爸爸回家的回家巴哈是不喝酒的巴哈说不定就不会节哀顺变</h1>
+  </div>
+</template>
+
+<script setup lang="ts">
+
+import { onMounted,onUnmounted } from 'vue';
+onMounted(()=>{
+  console.log('About页面挂载了')
+})
+onUnmounted(()=>{
+  console.log('About页面卸载了')
+})
+</script>

src/pages/Contact.vue

@@ -0,0 +1,5 @@
+<template>
+  <div>
+    <h1>Contact新闻页面---===---阿三大苏打姐姐爱神的箭阿三觉得可能今年爱上电话报警啊环保手机电话报警啊是比较</h1>
+  </div>
+</template>

src/pages/Home.vue

@@ -0,0 +1,5 @@
+<template>
+  <div>
+    <h1>Home啊实打实大苏打实打实多久啊是觉得就卡死</h1>
+  </div>
+</template>

src/router/index.ts

@@ -0,0 +1,17 @@
+//引入createRouter
+import { createRouter, createWebHistory} from 'vue-router'
+//引入组件
+import Home from '@/pages/Home.vue'
+import About from '@/pages/About.vue'
+import Contact from '@/pages/Contact.vue'
+
+const router = createRouter({
+    // 配置路由模式，这里使用的是hash模式，也可以使用history模式，具体可以查看vue-router的文档
+    history: createWebHistory(),
+    routes: [
+        { path: '/home', component: Home },
+        { path: '/about', component: About },
+        { path: '/contact', component: Contact },
+    ],
+})
+export default router

src/types/index.ts

@@ -1,11 +0,0 @@
-
-// 定义一个接口，用于描述一个人的信息
-export interface PersonInter {
-    name: string;
-    age: number;
-    id: string;
-
-}
-
-// 定义一个类型，用于描述一个人的数组
-export type Persons = PersonInter[];