Best practice: how do you use URL parameters single page app navigation?
I have built a SPA and have just changed to a component based model . The setup was as follows : 1 . When the user clicks on an item in the menu bar , the URL parameter was updated (in my case , "view " becomes e .g . "budget " ) . 2 . All content (titles , content , KPIs ) belonging to this view (budget ) is shown . The rest is hidden . Now , I have created a component for the view . The component 'Page ' contains slots for all content . This way , I only have to hide /show on this Page component level (great so far ! ) . I now have a Page component for each item in the menu bar , when a menu item like "budget " is chosen , URL parameter "view " is set to "budget " , and the Page component for "budget " is shown . However , I have to set the "view " attribute of the Page component manually to be the URL parameter every time I use the component . If I set the value to be the URL parameter in the component , it does not work . The overall solution works , but it feels like there should be a better solution . . does anyone have a good idea ? Great idea to use this standardised slots ! Like the simplicity of this single tree . Does remind me of an outliner . However I understand you want to improve . . . What I would do : I would wrap this 'page ' component in a component called 'budget ' etc . This way you can let your predefined attributes where they are . To be clear : in this structure you work on the component in isolation , so without your menu bar . At page level only show /hide is needed . This simplifies - if I understand your setup correctly - the need for setting multiple variable values for fields . Within the 'budget ' wrapper component perhaps all attributes can be static ( ? ) Also consider using a top level component for keeping global state , for values similar to attributes like 'modalOpen ' . This is how I would do it , hope it makes sense . But you have to build in a way that makes sense for you . 🫶1@Lucas G I think that is more or less what I have so far - just that I have one component for all my pages . I like it because it gives me the same layout in all of the pages . Or am I getting you wrong ? What I meant too is that now I am adding values into attributes that are always the same , like the URL parameters , or a flag from my API whether a user is flagged for beta or not . However , I need to push them from my main page into the attributes . Is that just the way to go or am I missing something ? This is a similar idea to what you 're building The main page of an SPA where each of those components is a page of the app and its show /hide condition is controlled by page path params In that example , main app has the header and a couple modals /components that are used throughout the app (like a toast component for example ) And it has a <main > element with a slot in which the other components go layout is the same for all its child components that way For example , an id to determine which project to show When working in them you wouldn 't need to set an attribute to change things unless I am missing something extra Let me record a video to what I mean 👍1I would recommend considering having each of those views be their own components then it would make them a lot easier to work with Then you don 't have to toggle back and forth as you are doing in the video As for the feature flags (premium feature , regular /beta user , etc . ) I would personally use contexts to pass those down to whatever child component needs them
.jpeg/public)