Vue3中关于路由规则的props配置方式
更新时间：2024年03月18日 10:14:41 作者：小馒头学python
这篇文章主要介绍了Vue3中关于路由规则的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>
上面仅仅是第一种写法，大概意思就是将路由收到的所有params参数作为props传给路由组件
props的第二种写法
这种写法是使用函数的形式
props(route){
return route.params
}
当然也是可以使用query的
props(route){
return route.query
}
但是使用query别忘了修改点地方
事实证明，也是可以实现的
props的第三种写法
第三种写法是对象写法
- 对象写法相对于函数写法更加静态，因为它直接将固定的值传递给组件属性，无法根据路由的动态变化来改变传递的值。
- 而函数写法可以根据需要动态地返回不同的属性值，更加灵活。
- 因此，在需要根据路由动态变化属性值的情况下，使用函数写法更加合适；而在属性值固定的情况下，使用对象写法可能更为简洁明了
就是较为固定，如果想动态还是函数比较好
总结
通过合理配置路由规则的 props 属性，可以使路由参数更加灵活地传递给组件。
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了vue 判断页面是首次进入还是再次刷新的实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-11-11
Vue是一个用于构建用户界面的JavaScript框架,在Vue中可以通过使用Vue组件来实现对表格的增删改查操作,下面将介绍一些基础的Vue组件和技术来实现对表格的增删改查操作,需要的朋友可以参考下2024-08-08
一直对编译原理的东西都有一种恐惧感，感觉太难了，看不懂，打开vue3源码看到编译相关的代码，直接吓退。不要担心，小编今天带你一文吃透Vue3编译原理2023-02-02
本篇文章主要介绍了Vue.js弹出模态框组件开发的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-07-07
图片预览插件vue-photo-preview的使用示例详解
这篇文章主要介绍了图片预览插件vue-photo-preview的使用,本文通过示例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2023-08-08
vue中解决chrome浏览器自动播放音频和MP3语音打包到线上的实现方法
这篇文章主要介绍了vue中解决chrome浏览器自动播放音频和MP3语音打包到线上的实现方法,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2020-10-10
这篇文章主要介绍了如何修改ant design组件自带样式问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-12-12
在我们实际项目开发过程中，会非常频繁地和 Vue 组件的生命周期打交道，接下来我们就从源码的角度来看一下这些生命周期的钩子函数是如何被执行的,需要的朋友可以参考下面文章内容2021-09-09
本文通过实例代码给大家介绍了vue 图标选择器的相关知识，图文实例代码相结合给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友参考下吧2021-11-11
解决Vue控制台报错Failed to mount component: tem
这篇文章主要介绍了解决Vue控制台报错Failed to mount component: template or render function not defined.问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-06-06
最新评论