Vue3中關(guān)于路由規(guī)則的props配置方式

更新時(shí)間：2024年03月18日 10:14:41 作者：小饅頭學(xué)python

這篇文章主要介紹了Vue3中關(guān)于路由規(guī)則的props配置方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教

簡(jiǎn)單介紹

在 Vue3 中，使用 Vue Router 進(jìn)行路由管理時(shí)，可以通過配置路由規(guī)則的 props 屬性，將路由參數(shù)傳遞給組件。

這樣可以使路由參數(shù)直接作為組件的屬性，在組件中使用更加方便

在路由配置中使用 props

在定義路由規(guī)則時(shí)，可以通過設(shè)置 props 屬性來指定如何將路由參數(shù)傳遞給組件。

props 可以是一個(gè)布爾值、對(duì)象或函數(shù)

props的第一種寫法

我們來回顧一下上節(jié)對(duì)于Detail.vue中的代碼，使用的是params參數(shù)

<template>
    <ul class="news-list">
      <li>編號(hào):{{ route.params.id }}</li>
      <li>標(biāo)題:{{ route.params.title }}</li>
      <li>內(nèi)容:{{ 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進(jìn)行結(jié)構(gòu)，下面的博客或許會(huì)幫助你

Vue3 toRefs和toRef在reactive中的一些應(yīng)用

修改后的代碼如下，和之前的運(yùn)行結(jié)果是一樣的

<template>
    <ul class="news-list">
      <li>編號(hào):{{ params.id }}</li>
      <li>標(biāo)題:{{ params.title }}</li>
      <li>內(nèi)容:{{ 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，來實(shí)現(xiàn)無需寫route和params

首先我們需要在index.ts中加上一句

再之后我們就在Detail.vue的ts里面加上一句就可以完美的實(shí)現(xiàn)之前的代碼了

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

完整代碼如下

<template>
    <ul class="news-list">
      <li>編號(hào):{{ id }}</li>
      <li>標(biāo)題:{{ title }}</li>
      <li>內(nèi)容:{{ 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參數(shù)作為props傳給路由組件

props的第二種寫法

這種寫法是使用函數(shù)的形式

props(route){
            return route.params
          }

當(dāng)然也是可以使用query的

props(route){
            return route.query
          }

但是使用query別忘了修改點(diǎn)地方

事實(shí)證明，也是可以實(shí)現(xiàn)的

props的第三種寫法

第三種寫法是對(duì)象寫法

對(duì)象寫法相對(duì)于函數(shù)寫法更加靜態(tài)，因?yàn)樗苯訉⒐潭ǖ闹祩鬟f給組件屬性，無法根據(jù)路由的動(dòng)態(tài)變化來改變傳遞的值。
而函數(shù)寫法可以根據(jù)需要?jiǎng)討B(tài)地返回不同的屬性值，更加靈活。
因此，在需要根據(jù)路由動(dòng)態(tài)變化屬性值的情況下，使用函數(shù)寫法更加合適；而在屬性值固定的情況下，使用對(duì)象寫法可能更為簡(jiǎn)潔明了

就是較為固定，如果想動(dòng)態(tài)還是函數(shù)比較好