Override existing routes
Overview
In the Administration
core code, each module is defined in a directory called module
. Modules define routes which can be extended with routeMiddleware
. To see what else you can customize in existing modules, have a look at this guide
A module
is an encapsulated unit which implements a whole feature. For example there are modules for customers, orders, settings, etc.
Prerequisites
All you need for this guide is a running Shopware 6 instance. Of course, you'll have to understand JavaScript and have a basic familiarity with Vue and the Vue Router. However, that's a prerequisite for Shopware as a whole and will not be taught as part of this documentation. Further a basic understanding of what modules are is also required, learn more about them here
Applying the override
At some point you might want to override or change existing routes, for example, to change the privileges required for a route or entirely replace it with your own.
This is done by creating a new module and implementing a routeMiddleware
. You can add those changes to your main.js
file, which could then look like this:
// <plugin root>/src/Resources/app/administration/src/main.js
Module.register('my-new-custom-route', {
routeMiddleware(next, currentRoute) {
if (currentRoute.name === 'sw.product.detail') {
const childIndex = currentRoute.children.findIndex(child => child.name === 'sw.product.detail.base');
currentRoute.children[childIndex] = {
name: 'sw.product.detail.base',
component: 'sw-product-detail-base',
path: 'base',
meta: {
parentPath: 'sw.product.index',
privilege: 'product.editor'
}
}
}
next(currentRoute);
}
});
This routeMiddleware
changes the required privileges for the sw.product.detail.base
route from product.viewer
to product.editor
. The rest of the route configurations stays the same in this example.
If you want to learn more about ACL take a look at this guide and if you want to learn everything about Administration routes, head over to this guide