如何在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

由于您的导出是default格式的，因此您可以在导入过程中选择任何名称：

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

Answer 2

您还可以在定义管线时导入元件。

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