什么是最好的Vue-路由器做法非常大的web应用程序？

问题描述 投票：22回答：3

我必须做出许多不同的模块（如TODO模块，文件模块，并为管理员用户大usermanagement模块），web应用。的总页数是> 100和模块访问是对每个用户不同。

我与Laravel和Vue的路由器工作。

但是，什么是做到这一点的最佳做法？

  1. 创建一个SPA的应用程序，与1大VUE路由器的一切？
  2. 对于每一个模块自己的单“SPA”（与和自己VUE路由器）？
  3. 或其他建议...？
laravel vue.js single-page-application vue-router
3个回答
12
投票

有点晚了，但我会尽量回答这个问题。这不仅仅是路由层次问题的架构问题。

TLDR：您将需要采取综合的做法。一种方法将不适合。

1.路由模式

首先，你应该确定是否与HTML 5 history mode or hash mode这是2018去了，我肯定会推荐您使用HTML5历史模式。

如果您使用的历史模式，那么就意味着你的客户端侧路由器将需要同步的工作与你的服务器端路由器。

2.微前端

我不知道如果你知道这一点，但micro-frontends是您正在寻找的术语。基本上，这是你种族隔离的第一道防线。您应该将应用程序分割成多个更小的应用程序。每个应用都会有它的根组件，路由器，型号，服务等，您将共享许多组件（当然，这个词非常大的应用是很重要的。而且我真的是认真的。）

3。莫诺回购拥挤拉基先生看好小号

如果您选择用微前端继续前进，那么你可以考虑使用mono-repo setup或勒拿湖构建。

4.路由模块 - 初始化

无论微应用程序，你的应用程序应该有一个起点 - main.js或index.js。在这个文件中，你应该初始化所有单身的东西。在一个典型的Vue.js APP主单实体是根组件，数据存储，路由器等。

你的路由模块会从任何组件分开。导入路由模块在这个入口文件，并在这里进行初始化。

5.路由模块 - 实施

路由模块应该被进一步分成更小的模块。使用简单的功能和ES模块，以做到这一点。每个函数负责返回一个RouteConfig对象。这是怎么会看：

const route: RouteConfig = {
    path: '/some-path',
    component: AppComponent,
    children: [
        getWelcomeRoute(),
        getDashboardRoute()
    ]
};

function getWelcomeRoute(): RouteConfig {
    return {
        name: ROUTE_WELCOME,
        path: '',
        component: WelcomeComponent
    };
}

在路径级，您应该考虑做模块的延迟加载。这将节省加载前期多字节：

function getLazyWelcomeRoute(): RouteConfig {

    // IMPORTANT for lazy loading
    const LazyWelcomeComponent = () => import('views/WelcomeComponent.vue');

    return {
        name: ROUTE_WELCOME,
        path: '',
        component: LazyWelcomeComponent
    };
}

除非你使用捆绑喜欢的WebPack或汇总你不能做到这一点。

5.路由模块 - 卫队

这是非常重要的逆天的地方，你应该处理您的授权。随着Vue.js，可以在组件的更高级别路线后卫。但是，我的建议是这样做克制。做到这一点只有在绝对必要。它基本上是一个值得关注的分离。你的路由模块应具有您的应用程序的授权的知识。和技术上存在的授权/适用于除部件的路由。这是什么原因，为什么我们干脆创建路由作为一个单独的模块。

我假设你正在使用某种像终极版或Vuex数据存储的非常大的应用程序。如果你打算写路径级后卫，那么你就需要与终极版/ Vuex存储数据进行磋商，以采取授权决定。这意味着你需要注入店，变成路由模块。要做到这一点最简单的方法是包装你的路由器初始化成这样的功能：

export function makeRouter(store: Store<AppState>): VueRouter {
    // Now you can access store here
    return new VueRouter({
        mode: 'history',
        routes: [
            getWelcomeRoute(store),
        ]
    });
}

现在，你可以简单地调用从入口点的文件这一功能。

6.路由模块 - 默认路由

记得来定义默认包罗万象的路线，以显示通用/智能404消息给用户。

7.路由模块 - 路由数据

由于我们是真的在谈论非常大的应用程序，这是更好地避免你的组件中直接访问到路由器。相反，保持你的路由器的数据同步与像vuex-router-sync 您的数据存储。你会做这个保存的bug痛苦的量。

8.路由模块 - 副作用

你会经常使用$router.replace()或$router.push()您的组件中。从组件的角度来看，它是一种副作用。相反，处理您的组件以外的纲领性路由器导航。创建所有路由器导航的核心地位。派遣请求/行动在外部实体来处理这些副作用你。 TLDR;不要直接将设备内做路由副作用。它会使你的组件扎实易于测试。在我们的例子中，我们使用终极版，可观察到处理路由副作用。

我希望这涵盖了一个非常大的规模化应用路由的所有方面。

1
投票

如果您有SPA程序走，请确保您使用的这些做法：

  1. 延迟加载/异步组件。我们通常做延迟加载静态资产。本着同样的精神，我们只需要在参观路线时加载组件。当组件需要渲染，并且将缓存结果以备将来重新呈现Vue公司只会触发出厂功能。
import MainPage from './routes/MainPage.vue'
const Page1 = r => require.ensure([], () => r(require('./routes/Page1.vue')))

const routes = [
  { path: '/main', component: MainPage },
  { path: '/page1', component: Page1 }
]
  1. 组合路线：（与上面）。例如，在下面的情况下，两条路线都在同一组块和包输出，从而导致当任路线被存取束是延迟加载。
const Page1 = r => require.ensure([], () => r(require('./routes/Page1.vue')), 'big-pages')  
const Page2 = r => require.ensure([], () => r(require('./routes/Page2.vue')), 'big-pages')
1
投票

Nuxt可以帮你。它动态生成的文件夹结构到路由器的配置文件。看一看qazxsw POI

它比路由甚至更多的帮助功能。但是，尤其是对于一般的想法大型应用程序设置上nuxt

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.