037:尚硅谷路由的query参数方法,学习示例

src/App.vue

@@ -1,11 +1,12 @@
 <template>
     <div class="app">
-        <h2>VUE路由测试实例</h2>
+        <h2 class="title">VUE路由测试实例</h2>
         <!-- 导航区 -->
          <div class="navigate">
-            <router-link to="/Home" active-class="active">首页</router-link>
+            <router-link :to="{name:'zhuye'}" active-class="active">首页</router-link>
-            <router-link to="/Contact" active-class="active">新闻</router-link>
+            <router-link to="/contact" active-class="active">联系</router-link>
-            <router-link to="/About" active-class="active">产品</router-link>
+            <router-link to="/about" active-class="active">关于</router-link>
+            <router-link to="/news" active-class="active">新闻</router-link>
         
          </div>
 
@@ -28,6 +29,7 @@
     </script>
 
 <style scoped>
+
 /* 全局和根容器样式 */
 .app {
   /* 使用更现代、更易读的字体 */
@@ -43,11 +45,13 @@
 }
 
 /* 标题样式 */
-h2 {
+.title {
   text-align: center; /* 标题居中 */
-  color: #2c3e50; /* 使用更深的颜色以突出 */
+  color: #ebc313; /* 使用更深的颜色以突出 */
   margin-bottom: 2rem; /* 与导航栏拉开距离 */
   font-weight: 600;
+  font-size: 4rem; /* 更大的字体大小 */
+  background-color: #397c68;
 }
 
 /* 导航容器 */

src/pages/Detail.vue

@@ -0,0 +1,26 @@
+<template>
+  <div class="detail">
+    <ul>
+        <li>标题:{{ route.query.title }}</li>
+        <li>内容:{{ route.query.content}}</li>
+        <li>时间</li>
+        <li>编号:{{ route.query.id }}</li>
+        <li>来源</li> 
+    </ul>
+  </div>
+</template>
+
+<script setup lang="ts">
+import {useRoute} from 'vue-router'
+const route = useRoute()
+</script>
+
+<style scoped>
+
+.detail li{
+    list-style: none;
+    font-size: 1.5rem;
+    color: #16a04b;
+}
+
+</style>

src/pages/News.vue

@@ -0,0 +1,61 @@
+<template>
+  <div class="news">
+    
+    <ul>
+      <li v-for="news in newsList" :key="news.id">
+        <!-- <router-link class="biao" :to="`/news/detail?id=${news.id}===标题=${news.title}===内容=${news.content}`">{{ news.title }}</router-link> -->
+      <router-link class="biao" 
+      :to="{name:'neirong',query:{
+        id:news.id,
+        title:news.title,
+        content:news.content
+        }}">{{ news.title }}
+        </router-link>
+    </li>
+    </ul>
+    <div class="news-cencont">
+        <router-view></router-view>
+    </div>
+
+  </div>
+</template>
+
+<script setup lang="ts">
+
+import { reactive } from 'vue';
+import { RouterView, RouterLink } from 'vue-router'; // 导入 useRoute 钩子函数
+
+// 假设我们有一个新闻列表
+const newsList = reactive([
+  { id: 'ahxcjadh01',title: '新闻一大师哈哈是的和环境', content: '这是新闻一的内容。' },
+  { id: 'ahxcjadh02',title: '新闻二啊uhi是否会卡斯克和附件', content: '这是新闻二的内容。' },
+  { id: 'ahxcjadh03',title: '新闻三奥数复活节卡卡是复活节', content: '这是新闻三的内容。' },
+  { id: 'ahxcjadh04',title: '新闻四u发数据库和纳税JFK你', content: '这是新闻四的内容。' },
+  { id: 'ahxcjadh05',title: '新闻五安分守己你看JFK三', content: '这是新闻五的内容。' }
+])
+</script>
+
+<style scoped>
+    .news-cencont{
+    width: 60%;
+    height: 300px;
+    margin-left: 35%;
+    margin-top: -8%;
+    /* text-align: center; */
+    padding-top: 1%;
+    background-color: #f4f7f9; /* 一个非常浅的灰色背景 */
+    border-radius: 10px; /* 圆角让它看起来更柔和 */
+    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); /* 添加阴影，产生立体感 */
+    color: #333;
+    }
+    .news ul {
+        color: #1ba04e;
+        font-size: 1.8rem;
+     
+    }
+    .biao {
+       color: #a709f1;
+    }
+    
+    
+    </style>

src/router/index.ts

@@ -4,14 +4,20 @@ import { createRouter, createWebHistory} from 'vue-router'
 import Home from '@/pages/Home.vue'
 import About from '@/pages/About.vue'
 import Contact from '@/pages/Contact.vue'
+import News from '@/pages/News.vue'
+import Detail from '@/pages/Detail.vue'
 
 const router = createRouter({
     // 配置路由模式，这里使用的是hash模式，也可以使用history模式，具体可以查看vue-router的文档
     history: createWebHistory(),
     routes: [
-        { path: '/home', component: Home },
+        { path: '/',name:'zhuye', component: Home },
         { path: '/about', component: About },
         { path: '/contact', component: Contact },
+        { name:'news',path: '/news', component: News, children:[
+            { name:'neirong',path: 'detail', component: Detail} 
+        ]  },
+
     ],
 })
 export default router