vue.js - 你如何在 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
    }
  ]
})