在元件中使用$route會使之與其對應路由形成高度耦合，從而使元件只能在某些特定的 URL 上使用，限制了其靈活性。

使用props將元件和路由解耦：

取代與$route的耦合

const User = {
  template: '<div>User {{ $route.params.id }}</div>'
}
const router = new VueRouter({
  routes: [
    { path: '/user/:id', component: User }
  ]
})

通過props解耦

const User = {
  props: ['id'],
  template: 
 
'<div>User {{ id }}</div>'
}
const router = new VueRouter({
  routes: [
    { path: '/user/:id', component: User, props: true },

    // 對於包含命名檢視的路由，你必須分別為每個命名檢視新增 `props` 選項：
    {
      path: '/user/:id',
      components: { default: User, sidebar: Sidebar },
      props: { default: true, sidebar: false
 
 }
    }
  ]
})

布林模式

如果props被設定為true，route.params將會被設定為元件屬性。

物件模式