Day5、Vue3 Router路由(下)

「本专栏是我在学习 Vue3 过程中的总结与分享，旨在帮助初学者快速上手 Vue3。由于我也在持续学习中，如果有任何疏漏或错误，欢迎大家在评论区指正，我们一起进步！」
提示：使用该文档学习vue3需要有一些vue和vue2的基础才可以更好的学习噢~~
版权：未经允许，禁止转载！
鼓励：每一次努力，都是在为未来的自己铺路；哪怕今天只进步一点点，也是在靠近更好的明天！
————————————————

---

前言

提示：建议大家在学习此之前，先复习一遍Day4--Router(上篇)

在昨天的课程中，我们已经掌握了 Vue Router 的基础用法，包括路由配置、页面导航、参数传递以及嵌套路由的实现。这些知识已经能够帮助我们构建功能丰富的单页面应用。然而，Vue Router 的魅力远不止于此，它还提供了许多强大的高级功能，可以帮助我们打造更加高效、灵活和用户友好的应用。今天，我们将继续深入探索 Vue Router 的进阶用法。

---

一、路由的props配置

作用：将路由参数以 props 的形式传递给组件，解耦路由逻辑与组件逻辑。

知识点：

• 在路由配置中通过 props: true 将动态路由参数（如 params）直接映射为组件的 props。

• 支持对象或函数形式的 props 配置，实现更灵活的参数传递。

优点：组件无需依赖 $route 对象，提升代码的可维护性和可复用性。

示例代码：

index.ts

import About from "@/views/About.vue";
import Detail from "@/views/Detail.vue";
import Home from "@/views/Home.vue";
import News from "@/views/News.vue";
import { createRouter, createWebHashHistory } from "vue-router";

const router = createRouter({
  history: createWebHashHistory(),
  routes: [
    { path: '/home', component: Home },
    {
      path: '/news', component: News, children: [
        // 加入props 就可以很方便的使用参数
        { 
          path: 'detail/:id/:title/:content', 
          name: 'xiang',
          component: Detail,
          //如果是动态参数的话 只需要这样写即可
          // props: true 
          //如果是静态参数的话 就必须这样写才行
          props(route){
            return route.query 
          }
        }
      ]
    },
    { path: '/about', component: About }
  ]
})
// 暴露
export default router

Detail.vue

<template>
  <ul class="news-list">
    <li>编号：{{id}}</li>
    <li>标题：{{title}}</li>
    <li>内容：{{content}}</li>
  </ul>
</template>

<script setup lang="ts" name="About">
defineProps(['id','title','content'])
</script>

<style scoped>
  .news-list {
    list-style: none;
    padding-left: 20px;
  }

  .news-list>li {
    line-height: 30px;
  }
</style>

---

二、replace属性

作用：控制路由跳转时是否替换当前历史记录，避免产生多余的历史记录。

知识点：

• 默认使用 push 方法跳转路由，会添加一条新的历史记录。

• 使用 replace 属性或 router.replace 方法跳转时，会替换当前历史记录。

适用场景：登录后跳转首页、表单提交后跳转结果页等无需回退的场景。

示例代码：

// replace 和 push 只能选一个
<router-link  replace/push  to="/home" active-class="active">首页</router-link>

---

三、编程式导航

作用：通过 JavaScript 代码动态控制路由跳转，实现更灵活的导航逻辑。

知识点：

• 使用 router.push 方法跳转到新路由，并添加历史记录。

• 使用 router.replace 方法跳转并替换当前历史记录。

• 支持传递路径字符串、路由对象（包含 path、query、params 等）。

适用场景：根据用户操作、异步请求结果等动态跳转路由。

示例代码：

News.vue

<template>
  <div class="news">
    <ul>
      <li v-for="item in newsList" :key="item.id">
        <button @click="showDetail(item)">查看新闻</button>

    <router-link :to="{
      // 使用params参数只能用name属性而不可以使用path属性
      name:'xiang',
      params:{
        id: item.id,
        title: item.title,
        content: item.content
      }
    }">
      {{item.title}}
    </router-link> 
  </li>
    </ul>
    <!-- 嵌套路由的展示区 -->
     <div class="news-content">
      <router-view></router-view>
     </div>
  </div>
</template>

<script setup lang="ts" name="News">
import { reactive } from 'vue';
import { RouterView, useRouter } from 'vue-router';
const newsList = reactive([
  {id: '001',title: '很好的药物',content: '枸杞'},
  {id: '002',title: '很好的食物',content: '鸡蛋'},
  {id: '003',title: '很好的衣物',content: '牛仔'},
  {id: '004',title: '很好的玩物',content: '篮球'},
])
// 使用router就掌控了整个路由器 用来实现编程式导航
const router = useRouter()
interface NewsInter{
  id:string,
  title: string,
  content: string
}
function showDetail(item:NewsInter){
  // 写路径跳转
  // 写法与to相同
  router.push({
    name:'xiang',
      params:{
        id: item.id,
        title: item.title,
        content: item.content
      }
  })
}
</script>

<style scoped>
/* 新闻 */
.news {
  padding: 0 20px;
  display: flex;
  justify-content: space-between;
  height: 100%;
}
.news ul {
  margin-top: 30px;
  list-style: none;
  padding-left: 10px;
}
.news li>a {
  font-size: 18px;
  line-height: 40px;
  text-decoration: none;
  color: #64967E;
  text-shadow: 0 0 1px rgb(0, 84, 0);
}
.news-content {
  width: 70%;
  height: 90%;
  border: 1px solid;
  margin-top: 20px;
  border-radius: 10px;
}
</style>

---

四、重定向

作用：将某个路径重定向到另一个路径，实现路径的跳转或迁移。

知识点：

• 在路由配置中使用 redirect 属性，指定目标路径或路由对象。

• 支持静态重定向（固定路径）和动态重定向（根据条件跳转）。

适用场景：旧路径迁移、默认首页跳转、权限控制等。

示例代码：

index.ts

import About from "@/views/About.vue";
import Detail from "@/views/Detail.vue";
import Home from "@/views/Home.vue";
import News from "@/views/News.vue";
import { createRouter, createWebHashHistory } from "vue-router";

const router = createRouter({
  history: createWebHashHistory(),
  routes: [
    { path: '/home', component: Home },
    {
      path: '/news', component: News, children: [
        // 加入props 就可以很方便的使用参数
        {
          path: 'detail/:id/:title/:content',
          name: 'xiang',
          component: Detail,
          props: true
        }
      ]
    },
    { path: '/about', component: About },
    //重定向
    {
      path: '/',
      redirect: '/home'
    }
  ]
})
// 暴露
export default router

---

总结

今天我们深入学习了 Vue Router 的进阶功能，进一步提升了路由管理的灵活性和效率，主要内容包括：

1. 路由的 props 配置

将路由参数以 props 的形式传递给组件，解耦路由与组件逻辑，提升代码可维护性。

2. replace 属性

使用 replace 属性替换当前历史记录，避免导航时产生多余的历史记录，适用于无需回退的场景。

3. 编程式导航

通过 router.push 和 router.replace 方法在 JavaScript 中动态控制路由跳转，实现更灵活的导航逻辑。

4. 重定向

使用 redirect 配置将某个路径重定向到另一个路径，适用于路径更新或页面迁移的场景。

---

Route的学习到此就结束啦！！！！大家有不懂的地方可以在评论区探讨。谢谢大家！！！