使用props傳遞路由參數(shù)能讓組件更易復(fù)用和測試，有三種方式：① 布爾模式：props: true 將路由參數(shù)作為props傳遞；② 對像模式：props: { key: value } 傳遞靜態(tài)值；③ 函數(shù)模式：props: (route) => ({}) 可動態(tài)處理參數(shù)並傳遞，需在組件中聲明對應(yīng)props，適用於簡單場景，提升組件解耦性和可維護性。

Passing props to route components in Vue Router is a clean way to make your components more reusable and easier to test. Instead of accessing $route directly inside your component, you can enable props for a route so that route parameters, query strings, or static values are passed as regular props.

Here's how to do it in Vue 3 with Vue Router (also applies to Vue 2 with vue-router 3.1 ):

? Enable Props in Route Configuration

You need to set props: true in your route definition to automatically pass route params as props.

 const routes = [
  {
    path: '/user/:id',
    component: UserComponent,
    props: true // This enables passing params as props
  }
]

With this setup, if you navigate to /user/123 , the UserComponent will receive id as a prop:

 <!-- UserComponent.vue -->
<template>
  <div>User ID: {{ id }}</div>
</template>

<script>
export default {
  props: [&#39;id&#39;]
}
</script>

? Pass Static and Dynamic Props

You can also pass static values or mix params with static/query values using a props function :

 {
  path: '/news',
  component: NewsComponent,
  props: (route) => ({
    page: parseInt(route.query.page) || 1,
    category: 'technology'
  })
}

Now NewsComponent receives page and category as props:

 <script>
export default {
  props: [&#39;page&#39;, &#39;category&#39;]
}
</script>

This is useful when you want to pass query parameters or transform route data before passing it down.

? Using Props with Named Routes or Components

If you're using named views (like components instead of component ), you must use object syntax with named props :

 {
  name: 'home',
  path: '/home',
  components: {
    default: HomeView,
    sidebar: SidebarComponent
  },
  props: {
    default: true,
    sidebar: { show: true }
  }
}

? Don't Use Props with Route-Level Components (Sometimes)

Avoid using props if your component heavily relies on the route itself (like many params or complex logic). In such cases, using useRoute() (Composition API) or this.$route (Options API) might be clearer.

But for simple, reusable components , prefer props — it makes them easier to test and decouples them from the router.

? Summary: 3 Ways to Pass Props

• Boolean mode : props: true → passes route params as props.
• Object mode : props: { id: 1 } → passes static values.
• Function mode : props: (route) => ({}) → full control over what to pass.

Example:

 [
  { path: '/user/:id', component: User, props: true },
  { path: '/feed', component: Feed, props: { type: 'hot' } },
  { path: '/search', component: Search, props: route => ({ q: route.query.q }) }
]

Use props when you can — it leads to cleaner, more maintainable components. Just remember to define the props option in your route and declare the props in your component.

Basically, it's a small change that makes your app more modular.

以上是如何通過道具將組件路由Vue路由器路由？的詳細(xì)內(nèi)容。更多資訊請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！