如何在 Vue Router 上导入同名组件答案

【问题标题】：How do you import components having same name on Vue Router如何在 Vue Router 上导入同名组件
【发布时间】：2018-01-26 21:56:25
【问题描述】：

我正在开发一个 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 有点陌生，因此欢迎提出改进和最佳实践方面的建议。

【问题讨论】：

标签： vue.js vuejs2 vue-router

【解决方案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
    }
  ]
})

【讨论】：

【解决方案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')
}

【讨论】：