如何在Vue Router上导入具有相同名称的组件

Question

我正在研究VueJs项目，现在正在构造路由器记录。我意识到我可能拥有名称相同的不同组件。如何导入它们并在路线记录中使用它们？配置路由器时，如何使它们的名称唯一？

import Vue from 'vue'
import Router from 'vue-router'
import AllUsers from '../components/Sales/AllUsers'
import AllUsers from '../components/Finance/AllUsers'
...
export default new Router({
routes: [
{
    path: '/', name: 'home', component: Home
},
{
    path: '/sales/users', name: 'sales-users', component: AllUsers
},
{
    path: '/finance/users', name: 'finance-users', component: AllUsers
}

我在这里使用了一个假设示例（因为我也可以将组件SalesUsers和称为FinanceUsers），但是您会同意有时组件确实具有相同的名称。考虑到我需要为每个路由记录指定组件，我该如何处理？

PS：对VueJS来说，这是个新手，因此欢迎提供有关改进和最佳实践的建议。

Answer 1

由于默认为导出，因此可以在导入期间选择任何名称：

import Vue from 'vue'
import Router from 'vue-router'
import AllSalesUsers from '../components/Sales/AllUsers'
import AllFinanceUsers from '../components/Finance/AllUsers'
// ...

export default new Router({
  routes: [
    {
      path: '/', name: 'home', component: Home
    },
    {
      path: '/sales/users', name: 'sales-users', component: AllSalesUsers
    },
    {
      path: '/finance/users', name: 'finance-users', component: AllFinanceUsers
    }
  ]
})