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

您还可以在定义路线时导入组件。

@PropertyName("Document Name")
public String getDocumentName() {
    return documentName;
}

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

2 个答案: