routes
property, which expects an object containing multiple route configuration objects. Each route configuration object needs to have a name
, which is set using the configuration object's key. Furthermore, we need to set a component and a path: A route points to a component using the key component
, which targets the component to be shown when this route is requested. The key path
represents the actual path, that's going to be used for this route. Do not get confused just because it is equal to the route name in the first route.custom.module.overview
and the URL being /overview
relative to the Administration's default URL. Usually you want to render your custom component here, which is explained here. But that is not all! Routes can have parameters, to then be handed to the components being rendered and much more. Learn more about what the Vue Router can do in its official Documentation.detail
, comes with a dynamic parameter as part of the route. When you want to open a detail page of an example, the route also has to contain the ID of the example, in the path
of detail
:detail
route comes with another new configuration, which is called meta
. As the name suggests, you can use this object to apply more meta information for your route. In this case the parentPath
is filled. Its purpose is to link the path of the actual parent route. In the administration, this results in a "back" button on the top left of your module when being on the detail page. This button will then link back to the list route and the icon defined earlier will also be used for this button.parentPath
value though. Its route follows this pattern: <bundle-name>.<name of the route>
bundle-name
is separated by dots instead of dashes here though. The second part is the name of the route, the key of the route configuration that is. Thus the path to the list
route is swag.example.list
. The same applies for the create
route.