vue router中的 component 有什么左右

在Vue Router中，component属性用于指定路由对应的组件。当路由被匹配时，Vue Router会将component属性指定的组件渲染到路由视图中。

component属性可以接收一个组件对象或组件的名称。如果使用组件对象，需要使用Vue.extend()方法将组件对象转换为一个Vue组件构造函数。如果使用组件的名称，需要在Vue实例中注册该组件。

下面是使用组件对象和组件名称的示例代码：

const router = new VueRouter({
  routes: [
    {
      path: '/home',
      component: Home // 组件对象
    },
    {
      path: '/about',
      component: Vue.extend({
        // 组件对象
      })
    },
    {
      path: '/user',
      component: 'User' // 组件名称
    }
  ]
})

// 注册组件
Vue.component('User', {
  // 组件定义
})

在上面的示例中，我们定义了三个路由，分别使用了组件对象、组件名称以及动态组件。其中，第一个路由使用了组件对象，第二个路由使用了Vue.extend()方法将一个组件对象转换为组件构造函数，第三个路由使用了组件名称，并在Vue实例中注册了该组件。

使用component属性可以方便地实现路由与组件的对应关系，让我们可以轻松地实现页面的切换和渲染。同时，在路由中可以使用props属性将数据传递给组件，从而实现更加灵活的页面渲染。