I have a setup where I have a routes file and multiple routes setup e.g: localhost:8000/test & localhost:8000/test2
My goal is to have a final route for example localhost:8000/tabs where I use some sort of Tab import for example bootstrap or Vuetify to crease tabs for each route within the page.
For example: localhost:8000/tabs?=test&test2 would render a page where the components test and test2 are the tab items. (Components themselves Dynamically retrieved using the routes file?).
The main problem with routes I am facing is that it reloads the page/changes the URL of the page instead of staying within localhost:8000/tabs.
Thanks for any advice.
Yes, you can using the <router-view /> and child routes.
Read more here
Related
I am just beginner in Reactjs and trying to use single layout components e.g. NavBar, MainContent and Footer. However, I am not sure how should I define properly. There are several options:
index.html
index.js
App.js
On the other hand, for Login page I want to use another template which has neither NavBar nor Footer. So, How should I define such a layout pages properly? Could you just give a basic and proper example? I implemented all layout seperately, just need the proper places implementations.
enter image description here
I'm currently trying to create a Angular-Webpage for a Uni-Project. Therefore i've built up a Webshop-MockUp with several different Pages like
Startscreen
Productscreen
Register/Loginscreen
Shopping-Cart Screen
Order-Screen
and Profile-Screen.
But as I'm now trying to develop the Webshop with Angular, I'm not quite sure, how the Architecture of the Component-Concept of Angular will fit to my needs.
As long as I understand for now it's working like that:
You create a Page with several (reusable) Components which all define different areas of one page.
For the example of the Startscreen, i've created the components:
hero-banner
header
filtering
product-overview
shopping-cart (will be shown on the right side)
These 5 Components can then be added to the app.components.html to show the first page.
But now I have no idea, how to create the other 5 pages and display them inside the app.component.
I've heard about the Routing to switch between components..
But does that mean I have to create one parent-component for every page where I tipe in these different components I've been creating?
And if so, what do I write into the app.component.html if I can Route between the different components anyways?
I just got a big knot in the head right now and I really hope you can help me out here!
Thanks in Advance!
Yep parent component for each page to act as manager component to talk to services, get data, and pass it down to dumb components and handle events from child components. Make your children dumb. This is known as container-component.
Yep learn routing. Also lazy load whenever you can but you can refactor this in later.
<router-outlet></router-outlet> goes in app.component.html.
Possibly something like
<app-navbar>
Text to display via ng-content
</app-navbar> <!-- Common to all routes/pages --!>
<router-outlet></router-outlet>
I created Vue app in VS code. When I try to run the app, the home component is rendered twice in the screen.
Here is the resulted homepage screen screenshot:
Here is the Home.vue code:
The Home component must be referenced twice. For example in App.vue or some other component you’re using.
I created a simple react app with react-router(v5.) There are footers with current year in every page.
const footerYear = document.getElementById('footerThisYear');
if (footerYear) {
footerYear.innerHTML = new Date().getFullYear();
}
The problem is the snippet above doesn't work in child pages entering through react-router's <Link>. It works when entering the complete urls.
Preview:
https://stackblitz.com/edit/react-mqjws7?file=index.js
Child page example url:
https://react-mqjws7.stackblitz.io/page/a
Question: How to get this work in every page?
Thank you!
If you want to get that to work on every page, you're going to have to put that if statement in the Footer.js file. The easiest way to explain this is that your routes are working like this:
URL -> index.js -> Router -> Page
When entering the page using the direct URL, this is the path it goes through since your Router component is located in index.js. When clicking on the Links on Home.js, since it originates from Home.js which is already in index.js, it's only going through
Router -> Page
As a result of this, the proper footer you want is not showing because the function to display it is located in index.js. To test this, you can place a console.log statement inside your if statement. It will not be called if you're navigating to your pages inside of Home.js.
Change Footer.js to a class and put the if statement in there and it should work correctly. Otherwise, you can also set the footer to conditionally render the year given a prop.
I am new to ember.js and am trying to build a SPA webpage that uses a lot of images.
I am using Ember CLI, and I have one Route. In the route model, I preload the data, as well as preload about 30+ images using RSVP and Promises.
I have a DIV tag in my HBS file that contains my loading screen
<div class="loading-screen"/>
I would like to modify my route so that in the "afterModel" method, I hide the "loading-screen" div tag.
Does anyone know how to accomplish this? I am not sure how to reference the DIV tag and hide it from within the Route.
Thank you.