【Vue3】Vue3中路由规则的 props 配置

本文主要是介绍【Vue3】Vue3中路由规则的 props 配置，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

💗💗💗欢迎来到我的博客，你将找到有关如何使用技术解决问题的文章，也会找到某个技术的学习路线。无论你是何种职业，我都希望我的博客对你有所帮助。最后不要忘记订阅我的博客以获取最新文章，也欢迎在文章下方留下你的评论和反馈。我期待着与你分享知识、互相学习和建立一个积极的社区。谢谢你的光临，让我们一起踏上这个知识之旅！

文章目录

🍋简单介绍
🍋在路由配置中使用 props
🍋props的第一种写法
🍋props的第二种写法
🍋props的第三种写法
🍋总结

🍋简单介绍

在 Vue3 中，使用 Vue Router 进行路由管理时，可以通过配置路由规则的 props 属性，将路由参数传递给组件。这样可以使路由参数直接作为组件的属性，在组件中使用更加方便

🍋在路由配置中使用 props

在定义路由规则时，可以通过设置 props 属性来指定如何将路由参数传递给组件。props 可以是一个布尔值、对象或函数

🍋props的第一种写法

我们来回顾一下上节对于Detail.vue中的代码，使用的是params参数

<template><ul class="news-list"><li>编号:{{ route.params.id }}</li><li>标题:{{ route.params.title }}</li><li>内容:{{ route.params.content }}</li></ul></template><script setup lang="ts" name="About">import { useRoute } from 'vue-router'let route = useRoute()</script><style scoped>.news-list {list-style: none;padding-left: 20px;}.news-list>li {line-height: 30px;}</style>

如果我们不想在模版中写route的话，我们需要使用torefs进行结构，下面的博客或许会帮助你
【Vue3】toRefs和toRef在reactive中的一些应用
修改后的代码如下，和之前的运行结果是一样的

<template><ul class="news-list"><li>编号:{{ params.id }}</li><li>标题:{{ params.title }}</li><li>内容:{{ params.content }}</li></ul></template><script setup lang="ts" name="About">import { toRefs } from 'vue'import { useRoute } from 'vue-router'let route = useRoute()let {params} = toRefs(route)</script><style scoped>.news-list {list-style: none;padding-left: 20px;}.news-list>li {line-height: 30px;}</style>

这样我们就可以省略了route，但是如果我们还想省略params呢，该怎么做
在这里插入图片描述
接下来我们引入props，来实现无需写route和params

首先我们需要在index.ts中加上一句
在这里插入图片描述
再之后我们就在Detail.vue的ts里面加上一句就可以完美的实现之前的代码了

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

完整代码如下

<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>