路由组件传参在组件中使用 $route 会使之与其对应路由形成高度耦合，从而使组件只能在某些特定的 URL 上使用，限制

在组件中使用 $route 会使之与其对应路由形成高度耦合，从而使组件只能在某些特定的 URL 上使用，限制了其灵活性。

使用 props 将组件和路由解耦：

$router

const User = { template: '

User {{ $route.params.id }}

' } const router = new VueRouter({ routes: [ { path: '/user/:id', component: User } ] })

props

const User = { props: ['id'], template: '

User {{ id }}

' }

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 }
}

] })