I have been doing some initial work to get to grips with the Aurelia framework and am trying to decide if I should be using child routers. This doesn't seem to be covered in much detail on the Aurelia router configuration page.
I was wondering if anyone has come across any good use case scenarios that I could examine to get a better understand of where and when to use this feature.
One scenario that springs to mind is 2nd level navigation. Say, for example, you have a main router for the top level sections of your app, eg:
Home
Products
Those sections could have a child router to handle the 2nd level pages - eg:
Products
Aircraft
Bombs
Guns
Tanks
Having the sub-views (aircraft, bombs, etc) for the products view in their own child router allows you to easily build out 2nd level navigation.
Related
I'm building a small Vue.js app that needs several different API calls. I'm using tmdb api and I want to have popular, upcoming and top rated movies sections in my app. All these use the same call, which is (for popular in this case):
https://api.themoviedb.org/3/movie/popular?api_key=api_key&language=en-US&page=1
(popular can be replaced with top_rated or upcoming)
I have created component for the above call and on my main page I'm passing static props to this component to get the data I want:
<Movies type="popular"/>
<Movies type="upcoming"/>
<Movies type="top_rated"/>
I accept props and then put it in the link in fetch in the component as this:
https://api.themoviedb.org/3/movie/${this.type}?api_key=api_key&language=en-US&page=1
Is this the right approach or should I just put all of the calls for popular, upcoming and top rated in Promise.all on my main page? Also I use these only on the main page and nowhere else in the app.
EDIT: I think that the main benefit of doing this in component is that I have to use only one for loop instead of 3. Still not sure if that's the right approach.
I think this is good approach. Each component is firing its own request and is rendered (updated) when that request is resolved independently of other instances of the component.
Using Promise.all doesn't make sense - is it important to have data from all 3 calls at the same time ? No...
You doing right :)
The Goal: Have two separate, independently navigateable routes with vue-router.
Details:
How can I have two parts of a page that are independently routed with vue router? Say you have a page split into a main view and a sidebar. The main view is what you would normally expect from a view, you click on links and it changes the path and loads a new component. The sidebar is completely separate, no matter where you are in the main view the sidebar does not change, but the sidebar also has links that let you go to different components within itself.
With vue-router, I can have named views, but these seem to be tied to whatever the current path/route is, and cannot be controlled separately.
Example Annotation:
Question
Can vue-router have two separate, and independent routes/views that are not tied to each other? If so, is there documentation on this, are there router code examples?
Note: There is no code here, it doesn't seem necessary as this isn't a code issue, it's a vue-router use-case issue.
You can achieve separate independent routes if you use 2 Vue apps each with its own router.
A small demo in this fiddle.
I've used 2 routes, one with history mode and one abstract.
The biggest problem I see with this is that, at least out of the box, you cannot have a URL that points the user to the same view(s), as now you are managing 2 different routers.
The other is related to communication, you now have 2 different Vue app instances so you need to do something about communication between them.
But this shouldn't be that hard
if you are using Vuex you can set the same store object on both of them
If you are just using a plain data object you can pass the same object to both instances and that will become reactive or
you can always communicate over the same bus
Looking at the react router documentation for the Route Config feature
I'm wondering if instead of hard coding the Link tags, if we could dynamically render straight from the routes array. EG: in the example they are hard coding the top level tags Taco and Sanwiches
That would also mean when we click on a top level route, the children are shown dynamically... and so on, for however deep it goes
To make it easier: I am less interested in each level being its own component... each can just be a page with child links... so the same component at every level
Any ideas of how to set this up?
I am not pretty sure if in web development this kind of thing is called as a 'bookmark' layout. I'll explain on below screen.
I would like to achieve something like this and missing a knowledge of how to do that. Could someone point me where should I anchore ? I could not find anything in web / probably looking with using bad phrases.
This component would be part of the application, after we push to the router path it's going to display this kind of layout. Basically I could achieve this buy keep pushing a different route for each page, but what if those pages belongs to "one model comoponent" I wouldn't like to reload them all of the time while switching them, just once after we entry to each. It would work like a tab bar in mobile apps (iOS).
In many UI contexts (e.g. browsers, macOS applications, etc.) and in Web Development, what you refer to as "bookmark layout" is simply called tabs (like the iOS tab bar that you also mention).
I wouldn't like to reload them all of the time while switching them
Vue offers you the built-in component <keep-alive> for such use case:
When wrapped around a dynamic component, <keep-alive> caches the inactive component instances without destroying them.
See the Vue guide: https://v2.vuejs.org/v2/guide/components-dynamic-async.html#keep-alive-with-Dynamic-Components
When switching between these components though, you’ll sometimes want to maintain their state or avoid re-rendering for performance reasons. […]
To solve this problem, we can wrap our dynamic component with a <keep-alive> element
I have started to build apps with vuejs recently and have one small issue that I can't get around:
I am using vue-router to jump between pages and lets say I have a huge list where additional items may be injected with ajax, user has to scroll, he click on item, see the details (is in new route) and when gets back list is reinitialized and has to scroll again to be at the point he was previously. Do I have some possibility to keep the state of given component (and view like scroll position) while using vue-router or do I have to keep some cache-instance in main app component and then map it on init?
Thank you.
Essentially, the issue is that your component stores state internally. Navigating away clears the state. There are two ways I see this could be handled.
1) (quickfix) instead of redirecting use another way of displaying the item details (modal, or expand come to mind). This way the state of the component is not lost
2) (the "proper way") store the state. Inevitably, you'll come up against this sooner or later and the best way to deal with storing a state is vuex. https://vuex.vuejs.org/en/intro.html Initially, this will require a bit of learning and add some complexity, but it is a worthwhile investment