033~042:尚硅谷路由部分,学习示例

src/App.vue

@@ -3,8 +3,8 @@
         <h2 class="title">VUE路由测试实例</h2>
         <!-- 导航区 -->
          <div class="navigate">
-            <router-link :to="{name:'zhuye'}" active-class="active">首页</router-link>
-            <router-link to="/contact" active-class="active">联系</router-link>
+            <router-link replace :to="{name:'zhuye'}" active-class="active">首页</router-link>
+            <router-link replace to="/contact" active-class="active">联系</router-link>
             <router-link to="/about" active-class="active">关于</router-link>
             <router-link to="/news" active-class="active">新闻</router-link>
         
@@ -21,7 +21,18 @@
     </template>
 
     <script setup lang="ts">
-    import {RouterView, RouterLink} from 'vue-router'
+    import {RouterView, RouterLink,useRouter} from 'vue-router'
+    import { onMounted } from 'vue';
+
+    const router = useRouter();
+
+    onMounted(() => {
+        // 当页面加载完成后，执行滚动到顶部的函数
+        setTimeout(() => {
+            router.push({ name: 'news' });
+            console.log('页面加载完成，执行滚动到顶部的函数');
+        }, 3000);
+    });
    
 
 

src/pages/Detail.vue

@@ -1,18 +1,17 @@
 <template>
   <div class="detail">
     <ul>
-        <li>标题:{{ route.query.title }}</li>
-        <li>内容:{{ route.query.content}}</li>
+        <li>标题:{{ title }}</li>
+        <li>内容:{{ content}}</li>
         <li>时间</li>
-        <li>编号:{{ route.query.id }}</li>
+        <li>编号:{{ id }}</li>
         <li>来源</li> 
     </ul>
   </div>
 </template>
 
 <script setup lang="ts">
-import {useRoute} from 'vue-router'
-const route = useRoute()
+defineProps(['id','title','content'])
 </script>
 
 <style scoped>

src/pages/News.vue

@@ -4,7 +4,8 @@
     <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" 
+      <button @click="showNewsDetail(news)">查看新闻按钮</button>
+        <router-link class="biao" 
       :to="{name:'neirong',query:{
         id:news.id,
         title:news.title,
@@ -23,8 +24,23 @@
 <script setup lang="ts">
 
 import { reactive } from 'vue';
-import { RouterView, RouterLink } from 'vue-router'; // 导入 useRoute 钩子函数
+import { RouterView, RouterLink, useRouter } from 'vue-router'; // 导入 useRoute 钩子函数
 
+const router = useRouter(); // 使用 useRouter 钩子函数获取路由对象
+
+interface NewsInter{
+  id:string,
+  title:string,
+  content:string
+}
+
+function showNewsDetail(news:NewsInter) {
+  router.push({name:'neirong',query:{
+        id:news.id,
+        title:news.title,
+        content:news.content
+        }}); // 使用 router.push 方法跳转到指定的路由
+}
 // 假设我们有一个新闻列表
 const newsList = reactive([
   { id: 'ahxcjadh01',title: '新闻一大师哈哈是的和环境', content: '这是新闻一的内容。' },

src/router/index.ts

@@ -11,13 +11,15 @@ const router = createRouter({
     // 配置路由模式，这里使用的是hash模式，也可以使用history模式，具体可以查看vue-router的文档
     history: createWebHistory(),
     routes: [
-        { path: '/',name:'zhuye', component: Home },
+        { path: '/home',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} 
+            { name:'neirong',path: 'detail', component: Detail, props: route =>  {return route.query} } 
         ]  },
+        { path: '/', redirect: '/home' }
 
     ],
 })
-export default router
+
+export default router;