# Landing page
We think that it makes sense to create a landing page which can load several configurations (consider the difference between configuration, configurable item and configuration string). This is useful if a user stops the configuration process and wants to continue later. Also a landing page can help to share a certain configuration because it is available under a specific URL .
The easiest way to achieve this is to parameterize the page we created throughout the tutorial by a query param. To be flexible it makes sense to support configurable items and configurations.
In code we add the following to our Scene.vue component:
const count = initialId.split(':').length;
if (count === 2) {
await rubensConfiguratorApi.loadConfigurableItemById(initialId);
} else {
await rubensConfiguratorApi.loadConfigurationById(initialId);
}
And in the setup method of our App.vue component we retrieve the query param id and pass it down to Scene.vue. This could be done like the following code:
setup(props) {
const objectId = ref("");
const urlParams = new URLSearchParams(window.location.search);
const id = urlParams.get("id");
// try to append ?id=roomle_content_demo:electronics003 to
// the URL and see what's happening
if (id) {
objectId.value = id;
}
return {
objectId,
};
}
# Code Sandbox
To see the results of this chapter in code checkout the Code Sandbox.
To try loading a different configuration just add id=usm:frame:F02D5FAC33D9128429E1E2A3F03431543C27DD4BB5FADA181FAE434D8B4BCC42 as a query param to the URL.