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.js自定义tipOnce指令用法实例

    详解Vue.js自定义tipOnce指令用法实例

    这篇文章主要介绍了详解Vue.js自定义tipOnce指令用法实例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-12-12
  • Vue中keep-alive组件作用详解

    Vue中keep-alive组件作用详解

    这篇文章主要为大家详细介绍了Vue中keep-alive组件的作用,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-02-02
  • Vue的表单双绑和组件你了解吗

    Vue的表单双绑和组件你了解吗

    这篇文章主要为大家详细介绍了Vue表单双绑和组件,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能够给你带来帮助
    2022-03-03
  • Vue的自定义组件不能使用click方法的解决

    Vue的自定义组件不能使用click方法的解决

    这篇文章主要介绍了Vue的自定义组件不能使用click方法的解决,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-07-07
  • Vue中$root的使用方法及注意事项

    Vue中$root的使用方法及注意事项

    这篇文章主要给大家介绍了关于Vue中$root使用方法及注意事项的相关资料,vue中$root是用来访问根组件的,文中通过代码介绍的非常详细,需要的朋友可以参考下
    2024-03-03
  • vue3动态路由+菜单栏的实现示例

    vue3动态路由+菜单栏的实现示例

    在后台管理系统,可以根据登录用户的不同返回不同路由,页面也会根据这些路由生成对应的菜单,本文主要介绍了vue3动态路由+菜单栏的实现示例,感兴趣的可以了解一下
    2024-04-04
  • 详解Vue组件复用和扩展之道

    详解Vue组件复用和扩展之道

    这篇文章主要介绍了Vue组件复用和扩展,对vue感兴趣的同学,可以参考下
    2021-05-05
  • vue.js如何在网页中实现一个金属抛光质感的按钮

    vue.js如何在网页中实现一个金属抛光质感的按钮

    这篇文章主要给大家介绍了关于vue.js如何在网页中实现一个金属抛光质感的按钮的相关资料,文中给出了详细的实例代码以及图文将实现的方法介绍的非常详细,需要的朋友可以参考下
    2023-04-04
  • vue默认插槽的理解与实例代码

    vue默认插槽的理解与实例代码

    对于插槽的概念和使用,这是vue的一个难点,这需要我们静下心来,慢慢研究,下面这篇文章主要给大家介绍了关于vue默认插槽的相关资料,需要的朋友可以参考下
    2021-11-11
  • vue 绑定使用 touchstart touchmove touchend解析

    vue 绑定使用 touchstart touchmove touchend解析

    这篇文章主要介绍了vue 绑定使用 touchstart touchmove touchend解析,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-03-03

最新评论